/* ============================================
   GAME LAYOUT v2.2 - Premium Landscape Board
   Matches reference design exactly
   Pieces: PNG images for performance
   ============================================ */

/* === FULLSCREEN === */
body.in-game .g-topbar{display:none!important}
body.in-game .nav-footer{display:none!important}
body.in-game{overflow:hidden!important;background:#060e06!important}
body.in-game #appContent{padding-bottom:0!important;height:100vh!important;height:100dvh!important;max-height:100vh!important;max-height:100dvh!important;overflow:hidden!important}
body.in-game #page-game{position:fixed!important;inset:0!important;z-index:9990;background:#060e06!important;padding:0!important;margin:0!important;min-height:100vh!important;min-height:100dvh!important}
body.tg-mode.in-game #page-game{padding-bottom:0!important}
body:not(.in-game){overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
body:not(.in-game) #appContent{overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;max-height:none!important;height:auto!important;min-height:calc(100vh - 50px)!important}



/* === GAME ROOT === */
.game-container{
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
  height:100vh!important;height:100dvh!important;width:100vw!important;max-width:none!important;
  margin:0!important;padding:4px 6px!important;gap:4px!important;
  background:radial-gradient(ellipse at 50% 45%,#121a10 0%,#080e06 65%)!important;
  overflow:hidden!important;
}

/* ═══════════════════════════════════════ */
/* ═══ SIDE PANELS ═══ */
/* ═══════════════════════════════════════ */
.gm-panel-left,.gm-panel-right{
  width:110px!important;min-width:85px!important;height:100%!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;padding:6px 4px!important;flex-shrink:0!important;
  background:none!important;border:none!important;gap:5px!important;
}
/* Spacer between card and controls */
.gm-panel-left>div[style*="flex:1"],.gm-panel-right>div[style*="flex:1"]{display:none!important}

/* Player card */
.gm-pcard{display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;padding:0!important;border-radius:0!important;background:none!important;border:none!important;width:auto!important}

/* Avatar - gold ring */
.gm-pcard-ava{
  width:50px!important;height:50px!important;border-radius:50%!important;
  background:linear-gradient(145deg,#1a2040,#252d55)!important;
  position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
  box-shadow:0 4px 16px rgba(0,0,0,0.5)!important;
  font-size:20px!important;font-weight:700!important;color:#c9a44a!important;overflow:visible!important;
}
.gm-pcard-ava::before{content:''!important;position:absolute!important;inset:-2.5px!important;border-radius:50%!important;background:linear-gradient(135deg,#c9a44a,#8b6914,#dbb84c,#a07820)!important;z-index:-1!important}
.gm-pcard-ava img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important}
/* Active turn glow */
.gm-pcard.active-turn .gm-pcard-ava::before{background:linear-gradient(135deg,#22d3ee,#0ea5e9,#22d3ee)!important}
.gm-pcard.active-turn .gm-pcard-ava{box-shadow:0 0 16px rgba(34,211,238,0.5),0 0 30px rgba(34,211,238,0.2)!important}

.gm-pcard-name{color:#e8dcc8!important;font-weight:700!important;font-size:0.75em!important;text-shadow:0 1px 6px rgba(0,0,0,0.6)!important;max-width:95px!important;text-align:center!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

.gm-pcard-color{width:9px!important;height:9px!important;border-radius:50%!important}
.gm-pcard-color.white{background:radial-gradient(circle,#eee,#bbb)!important;border:2px solid rgba(195,185,170,0.7)!important}
.gm-pcard-color.black{background:radial-gradient(circle,#444,#111)!important;border:2px solid rgba(70,70,70,0.5)!important}

/* Timer - circular */
.gm-panel-timer{
  width:60px!important;height:60px!important;border-radius:50%!important;
  position:relative!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  font-size:1.35em!important;font-weight:800!important;color:#e0f2fe!important;line-height:1!important;z-index:1!important;
}
.gm-panel-timer::before{content:''!important;position:absolute!important;inset:0!important;border-radius:50%!important;border:3px solid rgba(30,80,100,0.4)!important;background:radial-gradient(circle at 40% 35%,#0f1f30,#0a1520)!important;z-index:-1!important}
/* Active timer glow */
.gm-pcard.active-turn .gm-panel-timer::before{border-color:#22d3ee!important;box-shadow:0 0 20px rgba(34,211,238,0.3)!important;animation:tP 2s ease-in-out infinite!important}
@keyframes tP{0%,100%{box-shadow:0 0 15px rgba(34,211,238,0.2)}50%{box-shadow:0 0 30px rgba(34,211,238,0.4)}}

/* PIP */
.gm-panel-pip{background:linear-gradient(135deg,rgba(10,10,20,0.8),rgba(20,20,40,0.6))!important;border:1px solid rgba(201,164,74,0.25)!important;border-radius:5px!important;padding:2px 8px!important;color:#c9a44a!important;font-size:0.62em!important;font-weight:700!important}

/* Bet */
.gm-panel-bet{background:linear-gradient(145deg,rgba(15,12,8,0.9),rgba(30,25,15,0.8))!important;border:1.5px solid rgba(201,164,74,0.5)!important;border-radius:7px!important;padding:3px 12px!important;text-align:center!important;box-shadow:0 2px 10px rgba(201,164,74,0.15)!important}
.gm-panel-bet-label{color:rgba(160,140,100,0.6)!important;font-size:0.48em!important;font-weight:700!important;letter-spacing:1.5px!important}
.gm-panel-bet-amount{color:#ffd700!important;font-family:'Playfair Display',serif!important;font-size:1em!important;font-weight:900!important;text-shadow:0 0 8px rgba(255,215,0,0.3)!important}

/* Panel buttons - styled circles */
.gm-panel-controls{display:flex!important;gap:6px!important;flex-direction:row!important;flex-wrap:wrap!important;justify-content:center!important;width:auto!important;margin-top:0!important}
.gm-panel-btn{
  width:38px!important;height:38px!important;border-radius:50%!important;
  background:linear-gradient(145deg,#1a2040,#141830)!important;
  border:1.5px solid rgba(201,164,74,0.3)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;box-shadow:0 3px 10px rgba(0,0,0,0.4)!important;
  font-size:0.9em!important;padding:0!important;color:#c9a44a!important;
  -webkit-tap-highlight-color:transparent!important;
}
.gm-panel-btn:active{transform:scale(0.9)!important}
.gm-panel-btn.confirm{background:linear-gradient(145deg,#2a6b3a,#1e5a2e)!important;border-color:rgba(107,201,107,0.5)!important;color:#90ee90!important;font-size:1.1em!important;box-shadow:0 3px 12px rgba(74,168,74,0.3)!important}
.gm-panel-btn.confirm:disabled{opacity:0.25!important;pointer-events:none!important}
.gm-panel-btn.danger{background:linear-gradient(145deg,#4a1a1a,#3a1212)!important;border-color:rgba(200,80,80,0.4)!important;color:#ff8888!important}

/* ═══════════════════════════════════════ */
/* ═══ CENTER BOARD AREA ═══ */
/* ═══════════════════════════════════════ */
.gm-board-area{
  flex:1!important;max-width:720px!important;
  height:calc(100dvh - 12px)!important;max-height:100%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  perspective:1000px!important;overflow:visible!important;background:none!important;padding:8px 0!important;
}

/* ═══════════════════════════════════════ */
/* ═══ 3D BOARD CONTAINER ═══ */
/* ═══════════════════════════════════════ */
.board-container{
  width:100%!important;max-height:92%!important;max-width:none!important;flex:none!important;aspect-ratio:auto!important;
  transform:rotateX(8deg)!important;transform-origin:center 45%!important;
  transform-style:preserve-3d!important;
  filter:drop-shadow(0 18px 35px rgba(0,0,0,0.5))!important;
  position:relative!important;overflow:visible!important;border-radius:6px!important;
  min-height:0!important;box-shadow:none!important;height:100%!important;
  display:flex!important;background:none!important;padding:0!important;
}

/* ── OUTER WOOD FRAME ── */
.board-container::before{
  content:''!important;position:absolute!important;inset:0!important;border-radius:6px!important;
  border:6px solid transparent!important;
  background:linear-gradient(170deg,#8b5e3c,#6b3f25,#5a3018,#7a4e30,#4a2a18,#6b4028) border-box!important;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)!important;
  mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)!important;
  -webkit-mask-composite:xor!important;mask-composite:exclude!important;
  z-index:20!important;pointer-events:none!important;
}
/* ── Inner blue felt border ── */
.board-container::after{
  content:''!important;position:absolute!important;inset:6px!important;border-radius:3px!important;
  border:3px solid transparent!important;
  background:linear-gradient(180deg,#1a2d4a,#162540,#1a2d4a) border-box!important;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)!important;
  mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)!important;
  -webkit-mask-composite:xor!important;mask-composite:exclude!important;
  z-index:19!important;pointer-events:none!important;
}

/* ═══════════════════════════════════════ */
/* ═══ THE BOARD ═══ */
/* ═══════════════════════════════════════ */
.bg-board{
  position:absolute!important;top:9px!important;left:9px!important;right:9px!important;bottom:9px!important;
  display:flex!important;flex-direction:column!important;border-radius:2px!important;overflow:hidden!important;
  z-index:1!important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 8 L34 16 L30 24 L26 16Z' fill='none' stroke='rgba(160,130,70,0.13)' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='16' r='3' fill='none' stroke='rgba(160,130,70,0.1)' stroke-width='0.4'/%3E%3Cpath d='M10 30 Q15 26 20 30 Q15 34 10 30Z' fill='none' stroke='rgba(160,130,70,0.08)' stroke-width='0.4'/%3E%3Cpath d='M40 30 Q45 26 50 30 Q45 34 40 30Z' fill='none' stroke='rgba(160,130,70,0.08)' stroke-width='0.4'/%3E%3Cpath d='M30 42 L33 48 L30 54 L27 48Z' fill='none' stroke='rgba(160,130,70,0.1)' stroke-width='0.4'/%3E%3C/svg%3E"),
    linear-gradient(175deg,#f2e8d2,#ebe0c8,#e5d8be,#ede4ce,#f0e6d0)!important;
  box-shadow:none!important;
}
.bg-board::before,.bg-board::after{display:none!important}

.bg-board-main{flex:1!important;display:flex!important;flex-direction:column!important;position:relative!important;overflow:hidden!important;min-height:0!important}

/* ═══ HALVES ═══ */
.bg-half{flex:1!important;display:flex!important;position:relative!important;direction:ltr!important;overflow:hidden!important;min-height:0!important}
.bg-top{border-bottom:none!important;box-shadow:none!important}
.bg-bottom{box-shadow:none!important}
/* No edge decorations - they cover pieces */
.bg-half::before{display:none!important}
.bg-half::after{display:none!important}

/* ═══ QUADRANTS ═══ */
.bg-quad{flex:1!important;display:flex!important;padding:0 2px!important;overflow:hidden!important;min-width:0!important}

/* ═══ BAR - wood center divider with fold hinge ═══ */
.bg-bar{
  width:36px!important;min-width:36px!important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='60'%3E%3Cpath d='M0 8 Q9 5 18 8 T36 8' fill='none' stroke='rgba(200,160,90,0.18)' stroke-width='0.8'/%3E%3Cpath d='M0 20 Q12 16 18 20 T36 20' fill='none' stroke='rgba(200,160,90,0.15)' stroke-width='0.7'/%3E%3Cpath d='M0 32 Q9 28 18 32 T36 32' fill='none' stroke='rgba(200,160,90,0.18)' stroke-width='0.8'/%3E%3Cpath d='M0 44 Q12 40 24 44 T36 44' fill='none' stroke='rgba(200,160,90,0.13)' stroke-width='0.7'/%3E%3Cpath d='M0 56 Q9 53 18 56 T36 56' fill='none' stroke='rgba(200,160,90,0.16)' stroke-width='0.7'/%3E%3Cellipse cx='12' cy='28' rx='4' ry='6' fill='none' stroke='rgba(160,110,50,0.1)' stroke-width='0.5'/%3E%3Cellipse cx='28' cy='48' rx='3' ry='4' fill='none' stroke='rgba(160,110,50,0.08)' stroke-width='0.4'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#5e3822,#3e2210,#4e2c18,#3a1e0c,#5e3822)!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  position:relative!important;z-index:5!important;
  box-shadow:4px 0 10px rgba(0,0,0,0.35),-4px 0 10px rgba(0,0,0,0.35)!important;
  border-left:none!important;border-right:none!important;padding:0!important;
}
/* Vertical fold line - hinge down the center of bar */
.bg-bar::before{
  content:''!important;display:block!important;
  position:absolute!important;top:0!important;bottom:0!important;left:50%!important;width:4px!important;
  transform:translateX(-50%)!important;z-index:1!important;pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,0.4) 0%,
    rgba(20,10,5,0.7) 30%,
    rgba(5,2,0,0.8) 50%,
    rgba(20,10,5,0.7) 70%,
    rgba(0,0,0,0.4) 100%)!important;
  box-shadow:-2px 0 3px rgba(0,0,0,0.15),2px 0 3px rgba(0,0,0,0.15)!important;
}
.bg-bar::after{display:none!important}
.bg-bar .bg-piece{position:relative!important;z-index:2!important}

/* ═══ TRIANGLES ═══ */
.bg-point{flex:1!important;display:flex!important;flex-direction:column!important;position:relative!important;min-width:0!important;cursor:pointer!important;z-index:3!important;overflow:hidden!important}
.bg-point-top{justify-content:flex-start!important;padding-top:1px!important}
.bg-point-bottom{justify-content:flex-end!important;padding-bottom:1px!important}

/* Triangle shapes */
.bg-point-top .bg-tri{position:absolute!important;width:88%!important;height:78%!important;top:0!important;left:6%!important;clip-path:polygon(0 0,100% 0,50% 100%)!important;z-index:0!important}
.bg-point-bottom .bg-tri{position:absolute!important;width:88%!important;height:78%!important;bottom:0!important;left:6%!important;clip-path:polygon(50% 0,0 100%,100% 100%)!important;z-index:0!important}

/* Dark triangles - deep navy with engraved ornamental SVG */
.bg-pt-dark .bg-tri{
  background:
    repeating-linear-gradient(180deg,transparent,transparent 3px,rgba(100,150,200,0.02) 3px,rgba(100,150,200,0.02) 4px),
    linear-gradient(180deg,#1e3a5e,#162d4a,#1a3050,#14284a)!important;
  box-shadow:none!important;
}
/* Light triangles - cream with gold engraving */
.bg-pt-light .bg-tri{
  background:
    repeating-linear-gradient(180deg,transparent,transparent 3px,rgba(180,160,120,0.04) 3px,rgba(180,160,120,0.04) 4px),
    linear-gradient(180deg,#d8c8a4,#c4b48e,#b8a880,#ccbc98)!important;
  box-shadow:none!important;
}

/* Triangle number */
.bg-point-num{font-size:6px!important;color:rgba(160,140,100,0.2)!important}

/* Pieces container */
.bg-pieces{display:flex!important;flex-direction:column!important;align-items:center!important;z-index:5!important}
.bg-point-bottom .bg-pieces{flex-direction:column-reverse!important}

/* ═══════════════════════════════════════ */
/* ═══ PIECES - PNG images ═══ */
/* ═══════════════════════════════════════ */
.bg-piece{
  width:clamp(32px,7.5vh,46px)!important;height:clamp(32px,7.5vh,46px)!important;
  border-radius:50%!important;position:relative!important;z-index:3!important;
  cursor:pointer!important;flex-shrink:0!important;
  transition:transform 0.12s,box-shadow 0.12s!important;
  margin-top:clamp(-8px,-1.5vh,-2px)!important;
}
.bg-piece:first-child{margin-top:0!important}
.bg-point-bottom .bg-piece{margin-top:0!important;margin-bottom:clamp(-8px,-1.5vh,-2px)!important}
.bg-point-bottom .bg-piece:first-child{margin-bottom:0!important}

/* White piece - PNG with CSS fallback */
.bg-p-white,.bg-piece-w,
.bg-p-drag.bg-p-white,
.bg-p-white.bg-p-top,
.bg-piece.bg-p-white{
  background:url('/assets/white-piece.png') center/130% no-repeat!important;
  border:none!important;
  box-shadow:0 2px 6px rgba(0,0,0,0.25)!important;
}
/* Black piece - PNG with CSS fallback */
.bg-p-black,.bg-piece-b,
.bg-p-drag.bg-p-black,
.bg-p-black.bg-p-top,
.bg-piece.bg-p-black{
  background:url('/assets/black-piece.png') center/130% no-repeat!important;
  border:none!important;
  box-shadow:0 2px 6px rgba(0,0,0,0.5)!important;
}
/* Kill ALL internal decorations from board.css */
.bg-p-shine,.bg-p-ring{display:none!important;width:0!important;height:0!important}
.bg-p-white::before,.bg-p-white::after,
.bg-p-black::before,.bg-p-black::after,
.bg-piece-w::before,.bg-piece-w::after,
.bg-piece-b::before,.bg-piece-b::after,
.bg-piece.bg-p-white::before,.bg-piece.bg-p-white::after,
.bg-piece.bg-p-black::before,.bg-piece.bg-p-black::after{display:none!important;content:none!important}
/* Dragging piece */
.bg-p-drag{opacity:1!important}
.bg-p-drag.bg-p-white{background:url('/assets/white-piece.png') center/130% no-repeat!important}
.bg-p-drag.bg-p-black{background:url('/assets/black-piece.png') center/130% no-repeat!important}

/* Count badge */
.bg-piece-count{font-size:0.6em!important;font-weight:800!important;position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:2!important;pointer-events:none!important}
.bg-p-white .bg-piece-count,.bg-piece-w .bg-piece-count{color:#5a5040!important}
.bg-p-black .bg-piece-count,.bg-piece-b .bg-piece-count{color:#aaa!important}

/* Selected piece glow */
.bg-piece.selected{box-shadow:0 0 14px rgba(201,164,74,0.6),0 0 22px rgba(201,164,74,0.2),0 3px 8px rgba(0,0,0,0.4)!important;transform:scale(1.08)!important}
.bg-piece.dragging{position:fixed!important;z-index:1000!important;box-shadow:0 8px 20px rgba(0,0,0,0.5),0 0 15px rgba(201,164,74,0.3)!important}

/* Valid destination highlight - green transparent glow on whole point */
/* Highlights - use board.css originals, just ensure visibility */
.bg-point.bg-valid-dest .bg-tri{background:#2ecc40!important;filter:drop-shadow(0 0 8px rgba(46,204,64,0.6))!important}

/* ═══ BEAROFF ═══ */
.bg-bearoff{
  position:absolute!important;right:0!important;top:9px!important;bottom:9px!important;width:28px!important;
  background:linear-gradient(180deg,rgba(26,42,68,0.65),rgba(13,24,40,0.7),rgba(10,20,32,0.65))!important;
  backdrop-filter:blur(2px)!important;-webkit-backdrop-filter:blur(2px)!important;
  box-shadow:inset 2px 0 6px rgba(0,0,0,0.4)!important;
  border-left:2px solid rgba(90,60,35,0.6)!important;border-radius:0 2px 2px 0!important;
  opacity:0!important;pointer-events:none!important;
  transition:opacity 0.3s!important;
  z-index:15!important;
}
.bg-bearoff.visible{
  opacity:1!important;pointer-events:auto!important;
  box-shadow:inset 2px 0 6px rgba(0,0,0,0.4),0 0 8px rgba(201,164,74,0.15)!important;
  border-left:2px solid rgba(201,164,74,0.4)!important;
}
/* Bearoff highlight when it's a valid move destination */
.bg-bearoff.bg-bo-hl{
  background:linear-gradient(180deg,rgba(40,200,80,0.55),rgba(30,170,60,0.65),rgba(40,200,80,0.55))!important;
  border-left:2px solid rgba(80,255,120,0.8)!important;
  box-shadow:inset 0 0 12px rgba(60,220,100,0.5), 0 0 16px rgba(60,220,100,0.4)!important;
  animation:bearoffPulse 1.2s ease-in-out infinite!important;
}
@keyframes bearoffPulse{
  0%,100%{box-shadow:inset 0 0 15px rgba(60,220,100,0.4), 0 0 15px rgba(60,220,100,0.3)}
  50%{box-shadow:inset 0 0 20px rgba(60,220,100,0.6), 0 0 30px rgba(60,220,100,0.5)}
}

/* ═══ DICE AREA ═══ */
.dice-area{
  pointer-events:none!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;gap:6px!important;
  position:absolute!important;top:50%!important;right:30px!important;left:auto!important;
  transform:translateY(-50%)!important;
  z-index:20!important;
  transition:left 0.15s ease,right 0.15s ease!important;
}
/* Opponent rolling - dice on LEFT side */
.dice-area.dice-side-left{
  right:auto!important;left:30px!important;
}
.dice-arena{display:flex!important;gap:8px!important;align-items:center!important;justify-content:center!important;min-height:45px!important;position:relative!important;overflow:visible!important;pointer-events:none!important}
.dice-btn-wrap{display:flex!important;justify-content:center!important;pointer-events:auto!important}
.dice-results{display:flex!important;gap:8px!important;align-items:center!important;justify-content:center!important;pointer-events:none!important}
.btn-dice{
  font-size:13px!important;padding:6px 18px!important;border-radius:20px!important;
  background:linear-gradient(135deg,#4a7c59,#3d6b4e)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,0.2)!important;cursor:pointer!important;
  box-shadow:0 2px 8px rgba(0,0,0,0.3)!important;white-space:nowrap!important;
}
.btn-dice:disabled{opacity:0.5!important;cursor:not-allowed!important}
.dice-results span{
  width:28px!important;height:28px!important;border-radius:5px!important;
  font-size:16px!important;font-weight:900!important;
  background:rgba(139,90,43,0.85)!important;color:#ffe4a0!important;
  box-shadow:0 2px 8px rgba(0,0,0,0.5)!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
}

/* Image dice */
.dice-img-wrap{width:102px!important;height:102px!important;position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important}

#undoFloating{pointer-events:auto!important}
#undoFloating .btn-undo-float{pointer-events:auto!important}
/* ═══ 3D DICE ═══ */
.dice3d-wrap{pointer-events:none}
.dice3d-shadow{
  position:absolute;width:63px;height:22px;
  background:radial-gradient(ellipse,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.15) 50%,transparent 75%);
  border-radius:50%;pointer-events:none;z-index:1;opacity:0;
}
.dice3d-face{
  position:absolute;width:100%;height:100%;
  border-radius:18%;
  background:linear-gradient(145deg,#fffdf8 0%,#f8eed8 40%,#eedcc0 100%);
  border:1px solid rgba(180,160,130,0.5);
  box-shadow:inset 0 1px 2px rgba(255,255,255,0.7),inset 0 -1px 3px rgba(0,0,0,0.06);
  backface-visibility:visible;
}
.dice3d-grid{
  display:grid;width:100%;height:100%;
  grid-template:repeat(3,1fr)/repeat(3,1fr);
  place-items:center;padding:14%;
}
.dice3d-dot{
  width:76%;height:76%;border-radius:50%;
  background:transparent;
}
.dice3d-dot.on{
  background:radial-gradient(circle at 38% 32%,#c82828,#8b1515,#4a0a0a);
  box-shadow:0 0 4px rgba(180,30,30,0.85),0 0 1px rgba(200,50,50,0.8),inset 0 1px 1px rgba(255,255,255,0.25);
}

/* ═══════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════
   DICE SKINS - Premium Glass Collection
   All gloss baked into background - no ::before on faces
   No outer box-shadow on faces - only inset
   ═══════════════════════════════════════════════════════════════ */

/* ─── SKIN: BLACK GLASS & GOLD ─── */
.dice-skin-blackgold .dice3d-face{
  border-radius:22%;overflow:hidden;
  background:
    radial-gradient(ellipse 25% 20% at 12% 10%,rgba(255,255,255,0.18),transparent 60%),
    linear-gradient(160deg,#1a1a20 0%,#0d0d11 20%,#050507 45%,#09090d 70%,#101015 100%);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.16),
    inset 0 -2px 4px rgba(0,0,0,0.9);
}
.dice-skin-blackgold .dice3d-dot.on{
  background:radial-gradient(circle at 40% 35%,#fffef0 0%,#ffe44d 12%,#ffc800 28%,#daa520 50%,#b8860b 75%);
  box-shadow:0 0 5px rgba(255,200,0,0.85),0 0 2px rgba(255,230,100,0.9),0 0 8px rgba(255,180,0,0.3);
  border:0.5px solid rgba(180,130,20,0.8);
}
.dice-skin-blackgold .dice3d-dot.on::before{
  content:'';position:absolute;top:6%;left:10%;width:20%;height:16%;
  background:radial-gradient(ellipse,rgba(255,255,255,0.25),transparent 65%);
  border-radius:50%;
}

/* ─── SKIN: RUBY ─── */
.dice-skin-ruby .dice3d-face{
  border-radius:20%;overflow:hidden;
  background:
    radial-gradient(ellipse 25% 20% at 12% 10%,rgba(255,180,180,0.18),transparent 55%),
    linear-gradient(155deg,rgba(180,20,30,0.88) 0%,rgba(100,5,12,0.95) 45%,rgba(160,15,25,0.9) 100%);
  border:1px solid rgba(255,120,120,0.12);
  box-shadow:
    inset 0 2px 4px rgba(255,180,180,0.18),
    inset 0 -2px 5px rgba(60,0,0,0.7);
}
.dice-skin-ruby .dice3d-dot.on{
  background:radial-gradient(circle at 40% 35%,#fffef0 0%,#ffe44d 12%,#ffc800 28%,#daa520 50%,#b8860b 75%);
  box-shadow:0 0 5px rgba(255,200,0,0.85),0 0 2px rgba(255,230,100,0.9),0 0 8px rgba(255,180,0,0.3);
  border:0.5px solid rgba(180,130,20,0.8);
}
.dice-skin-ruby .dice3d-dot.on::before{
  content:'';position:absolute;top:6%;left:10%;width:20%;height:16%;
  background:radial-gradient(ellipse,rgba(255,255,255,0.25),transparent 65%);
  border-radius:50%;
}

/* ─── SKIN: ICE / CRYSTAL ─── */
.dice-skin-ice .dice3d-face{
  border-radius:19%;overflow:hidden;
  background:
    radial-gradient(ellipse 24% 18% at 12% 10%,rgba(255,255,255,0.25),transparent 55%),
    linear-gradient(158deg,rgba(180,215,240,0.7) 0%,rgba(100,165,215,0.82) 35%,rgba(160,205,240,0.72) 100%);
  border:1px solid rgba(200,230,255,0.2);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.28),
    inset 0 -2px 4px rgba(40,80,120,0.5);
}
.dice-skin-ice .dice3d-dot.on{
  background:radial-gradient(circle at 40% 35%,#ffffff 0%,#d8ecff 18%,#80bbee 45%,#4080bb 80%);
  box-shadow:0 0 5px rgba(120,200,255,0.85),0 0 2px rgba(255,255,255,0.9),0 0 8px rgba(100,180,255,0.3);
  border:0.5px solid rgba(80,160,230,0.7);
}
.dice-skin-ice .dice3d-dot.on::before{
  content:'';position:absolute;top:6%;left:10%;width:20%;height:16%;
  background:radial-gradient(ellipse,rgba(255,255,255,0.25),transparent 65%);
  border-radius:50%;
}

/* ─── SKIN: NEON ─── */
.dice-skin-neon .dice3d-face{
  border-radius:16%;overflow:hidden;
  background:linear-gradient(160deg,#141418 0%,#080809 50%,#111114 100%);
  border:1px solid rgba(160,80,255,0.35);
  box-shadow:
    inset 0 1px 0px rgba(160,80,255,0.3),
    inset 0 -1px 0px rgba(0,200,255,0.15),
    inset 0 0 6px rgba(160,80,255,0.15);
}
.dice-skin-neon .dice3d-dot.on{
  background:radial-gradient(circle at 45% 42%,#ffffff 0%,#80ffff 10%,#00e5ff 28%,#00aacc 60%);
  box-shadow:0 0 6px rgba(0,229,255,0.85),0 0 2px rgba(128,255,255,0.9),0 0 9px rgba(0,229,255,0.35);
  border:0.5px solid rgba(0,229,255,0.8);
}
.dice-skin-neon .dice3d-dot.on::before{
  content:'';position:absolute;top:6%;left:10%;width:20%;height:16%;
  background:radial-gradient(ellipse,rgba(255,255,255,0.25),transparent 65%);
  border-radius:50%;
}

/* ─── SKIN: EMERALD ─── */
.dice-skin-emerald .dice3d-face{
  border-radius:21%;overflow:hidden;
  background:
    radial-gradient(ellipse 25% 20% at 12% 10%,rgba(120,255,180,0.10),transparent 50%),
    linear-gradient(155deg,rgba(16,80,50,0.95) 0%,rgba(6,42,28,0.98) 42%,rgba(20,85,55,0.94) 100%);
  border:1px solid rgba(100,200,150,0.12);
  box-shadow:
    inset 0 2px 4px rgba(150,255,200,0.14),
    inset 0 -2px 5px rgba(0,20,10,0.8);
}
.dice-skin-emerald .dice3d-dot.on{
  background:radial-gradient(circle at 40% 35%,#fffef0 0%,#ffe44d 12%,#ffc800 28%,#daa520 50%,#b8860b 75%);
  box-shadow:0 0 5px rgba(255,200,0,0.85),0 0 2px rgba(255,230,100,0.9),0 0 8px rgba(255,180,0,0.3);
  border:0.5px solid rgba(180,130,20,0.8);
}
.dice-skin-emerald .dice3d-dot.on::before{
  content:'';position:absolute;top:6%;left:10%;width:20%;height:16%;
  background:radial-gradient(ellipse,rgba(255,255,255,0.25),transparent 65%);
  border-radius:50%;
}

/* ─── SKIN: MAGMA ─── */
.dice-skin-magma .dice3d-face{
  border-radius:19%;overflow:hidden;
  background:
    linear-gradient(35deg,transparent 22%,rgba(255,100,20,0.1) 23%,transparent 26%),
    linear-gradient(145deg,transparent 40%,rgba(255,120,30,0.08) 41%,transparent 44%),
    linear-gradient(160deg,#1a1412 0%,#0a0806 50%,#15100c 100%);
  border:1px solid rgba(255,80,20,0.1);
  box-shadow:
    inset 0 1px 2px rgba(255,120,40,0.08),
    inset 0 -2px 5px rgba(0,0,0,0.8);
}
.dice-skin-magma .dice3d-dot.on{
  background:radial-gradient(circle at 42% 38%,#fffde0 0%,#ffcc00 10%,#ff9900 28%,#ff5500 55%,#cc2200 85%);
  box-shadow:0 0 5px rgba(255,120,0,0.85),0 0 2px rgba(255,200,50,0.9),0 0 8px rgba(255,80,0,0.3);
  border:0.5px solid rgba(255,80,10,0.7);
}
.dice-skin-magma .dice3d-dot.on::before{
  content:'';position:absolute;top:6%;left:10%;width:20%;height:16%;
  background:radial-gradient(ellipse,rgba(255,255,255,0.25),transparent 65%);
  border-radius:50%;
}

/* ─── SKIN: MARBLE ─── */
.dice-skin-marble .dice3d-face{
  border-radius:20%;overflow:hidden;
  background:
    radial-gradient(ellipse 24% 18% at 10% 8%,rgba(255,255,255,0.25),transparent 50%),
    linear-gradient(42deg,transparent 25%,rgba(140,135,125,0.06) 26%,transparent 29%),
    linear-gradient(128deg,transparent 42%,rgba(150,140,130,0.05) 43%,transparent 46%),
    linear-gradient(158deg,#f5f0e6 0%,#e4dccf 38%,#eee8dc 100%);
  border:1px solid rgba(200,190,170,0.35);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(100,90,70,0.12);
}
.dice-skin-marble .dice3d-dot.on{
  background:radial-gradient(circle at 42% 38%,#2a2820 0%,#121110 30%,#050504 75%);
  box-shadow:0 0 3px rgba(0,0,0,0.9),0 0 1px rgba(0,0,0,0.8),inset 0 1px 1px rgba(80,75,65,0.4);
  border:1px solid rgba(40,35,25,0.8);
}
.dice-skin-marble .dice3d-dot.on::before{
  content:'';position:absolute;top:6%;left:10%;width:20%;height:16%;
  background:radial-gradient(ellipse,rgba(255,255,255,0.25),transparent 65%);
  border-radius:50%;
}

/* ═══ END DICE SKINS ═══ */

.dice-img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.7))!important}
.dice-img-wrap.dice-used{opacity:0.3!important;filter:grayscale(0.5)!important}

/* Rolling - spin + bounce while roll-frame images show actual tumbling */
.dice-img-wrap.dice-rolling{animation:diceRoll 0.3s linear infinite!important}
@keyframes diceRoll{
  0%  {transform:scale(1) rotate(0deg) translateY(0)}
  25% {transform:scale(0.95) rotate(90deg) translateY(-4px)}
  50% {transform:scale(1.05) rotate(180deg) translateY(0)}
  75% {transform:scale(0.95) rotate(270deg) translateY(-4px)}
  100%{transform:scale(1) rotate(360deg) translateY(0)}
}

/* Landing bounce - satisfying settle */
.dice-img-wrap.dice-landed{animation:diceLand 0.4s cubic-bezier(.34,1.56,.64,1) forwards!important}
@keyframes diceLand{
  0%  {transform:scale(1.1) translateY(-3px)}
  40% {transform:scale(0.95) translateY(1px)}
  70% {transform:scale(1.02) translateY(0)}
  100%{transform:scale(1) translateY(0)}
}

/* Hide old 3D dice elements */
.dice-container,.dice3d,.dface{display:none!important}

/* On small screens */
@media(max-height:420px){
  .dice-img-wrap{width:77px!important;height:77px!important}
}

/* Roll button - green */
.btn-dice{
  background:linear-gradient(180deg,#6bc96b,#4aa84a,#3d8b3d)!important;
  border:none!important;border-radius:22px!important;padding:8px 28px!important;
  color:#fff!important;font-family:'Outfit',sans-serif!important;font-size:0.92em!important;font-weight:800!important;
  letter-spacing:2px!important;cursor:pointer!important;position:relative!important;overflow:hidden!important;
  box-shadow:0 4px 16px rgba(74,168,74,0.4),0 1px 0 rgba(255,255,255,0.2) inset!important;
  text-shadow:0 1px 3px rgba(0,0,0,0.3)!important;
}
.btn-dice::before{content:''!important;position:absolute!important;top:0!important;left:0!important;right:0!important;height:50%!important;background:linear-gradient(180deg,rgba(255,255,255,0.18),transparent)!important;border-radius:22px 22px 0 0!important;pointer-events:none!important}
.btn-dice:active{transform:scale(0.94)!important}
.btn-dice:disabled{opacity:0.3!important;cursor:default!important}

/* ═══ HOME ZONE ═══ */
.bg-home-zone{display:none!important}
/* Home indicator - gold bar at the edge of home quadrant */
.bg-home-mine{
  display:block!important;
  position:absolute!important;left:0!important;right:0!important;height:3px!important;
  background:linear-gradient(90deg,transparent,rgba(201,164,74,0.7),transparent)!important;
  z-index:10!important;pointer-events:none!important;
  box-shadow:0 0 8px rgba(201,164,74,0.4)!important;
}
.bg-point-bottom .bg-home-mine{bottom:0!important;top:auto!important}
.bg-point-top .bg-home-mine{top:0!important;bottom:auto!important}
.bg-home-opp{display:none!important}

/* ═══ EXIT BUTTON ═══ */
.gm-exit{
  position:absolute!important;top:4px!important;left:4px!important;
  width:28px!important;height:28px!important;border-radius:50%!important;
  background:linear-gradient(145deg,#3a1515,#2a0e0e)!important;
  border:1.5px solid rgba(200,80,80,0.4)!important;color:#ff8888!important;
  font-size:14px!important;z-index:100!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;
}
.gm-exit:active{transform:scale(0.9)!important}

/* Flip button */
.bg-flip-btn{
  position:absolute!important;bottom:4px!important;left:4px!important;
  width:24px!important;height:24px!important;border-radius:50%!important;
  background:linear-gradient(145deg,#1a2040,#141830)!important;
  border:1.5px solid rgba(201,164,74,0.3)!important;z-index:100!important;
  font-size:10px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}

/* ═══ CHAT ═══ */
.game-chat{position:fixed!important;bottom:60px!important;left:10px!important;width:280px!important;max-height:250px!important;background:rgba(8,12,24,0.95)!important;border:1px solid rgba(201,164,74,0.3)!important;border-radius:10px!important;z-index:9995!important;flex-direction:column!important;display:none!important;box-shadow:0 4px 20px rgba(0,0,0,0.5)!important}
.game-chat.chat-open{display:flex!important}
.chat-close-btn{position:absolute!important;top:4px!important;right:6px!important;width:24px!important;height:24px!important;border-radius:50%!important;background:rgba(200,50,50,0.8)!important;color:#fff!important;font-size:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;z-index:10!important;border:none!important;line-height:1!important}
.game-chat .chat-messages{flex:1!important;overflow-y:auto!important;padding:8px!important;min-height:120px!important;max-height:180px!important}
.game-chat .chat-input-row{display:flex!important;gap:4px!important;padding:6px!important;border-top:1px solid rgba(201,164,74,0.15)!important}

/* ═══ HIDE OLD ELEMENTS ═══ */
.game-controls{display:none!important}
.gm-header{display:none!important}
.my-color-banner{display:none!important}
.turn-banner{display:none!important}

/* Board overlay - no background */
/* dice-area positioned in boardContainer directly */
#boardCanvas{display:none!important}
.bar-pieces{display:none!important}

/* ═══ RESPONSIVE ═══ */
@media(min-width:1024px){.gm-board-area{height:85dvh!important}.bg-bearoff{right:-30px!important}}
@media(max-height:380px){
  .gm-panel-left,.gm-panel-right{width:80px!important;min-width:70px!important}
  .gm-pcard-ava{width:36px!important;height:36px!important;font-size:15px!important}
  .gm-panel-timer{width:46px!important;height:46px!important;font-size:1em!important}
  .gm-panel-btn{width:32px!important;height:32px!important;font-size:0.75em!important}
  .bg-bar{width:28px!important;min-width:28px!important}
  .btn-dice{padding:6px 18px!important;font-size:0.78em!important}
}
@media(max-width:680px){
  .gm-panel-left,.gm-panel-right{width:78px!important;min-width:68px!important}
  .gm-pcard-ava{width:38px!important;height:38px!important}
  .gm-panel-timer{width:48px!important;height:48px!important;font-size:1.05em!important}
  .bg-bar{width:26px!important;min-width:26px!important}
  .btn-dice{padding:6px 18px!important;font-size:0.8em!important}
}

/* ═══ PORTRAIT MODE ═══ */
/* CSS-only - no JS dependency. Top=opponent, Bottom=me+controls */

@media(orientation:portrait){
  body.in-game .game-container{
    flex-direction:column!important;gap:0!important;padding:0!important;
    max-width:100%!important;align-items:stretch!important;justify-content:flex-start!important;
  }
  /* KEEP panels visible - just restyle as horizontal strips */
  body.in-game .gm-panel-left{
    order:-1!important;
    flex-direction:row!important;width:100%!important;height:auto!important;
    min-width:unset!important;min-height:unset!important;max-height:unset!important;
    padding:4px 8px!important;gap:5px!important;
    align-items:center!important;justify-content:center!important;
    flex-shrink:0!important;flex-wrap:nowrap!important;
    background:linear-gradient(180deg,rgba(8,12,24,0.98),rgba(12,16,30,0.95))!important;
    border-bottom:1px solid rgba(201,164,74,0.12)!important;
  }
  body.in-game .gm-panel-right{
    order:1!important;
    flex-direction:row!important;width:100%!important;height:auto!important;
    min-width:unset!important;min-height:unset!important;max-height:unset!important;
    padding:6px 8px 52px 8px!important;gap:5px!important;
    align-items:center!important;justify-content:center!important;
    flex-shrink:0!important;flex-wrap:nowrap!important;
    background:linear-gradient(0deg,rgba(8,12,24,0.98),rgba(12,16,30,0.95))!important;
    border-top:1px solid rgba(201,164,74,0.12)!important;
  }
  @supports(padding-bottom:env(safe-area-inset-bottom)){
    body.in-game .gm-panel-right{
      padding-bottom:max(52px,calc(env(safe-area-inset-bottom,0px)+10px))!important;
    }
  }
  body.in-game .gm-panel-left>div[style*="flex:1"],
  body.in-game .gm-panel-right>div[style*="flex:1"]{display:none!important}

  /* Player card row */
  body.in-game .gm-pcard{flex-direction:row!important;gap:5px!important;align-items:center!important;padding:0!important;flex-shrink:0!important}
  body.in-game .gm-pcard-ava{width:30px!important;height:30px!important;font-size:13px!important;flex-shrink:0!important}
  body.in-game .gm-pcard-name{font-size:0.7em!important;max-width:60px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  body.in-game .gm-pcard-color{width:7px!important;height:7px!important}
  body.in-game .gm-panel-timer{width:38px!important;height:38px!important;flex-shrink:0!important;font-size:0.88em!important}
  body.in-game .gm-panel-pip{font-size:0.55em!important;padding:2px 5px!important;flex-shrink:0!important}
  body.in-game .gm-panel-bet{padding:2px 6px!important;flex-shrink:0!important}
  body.in-game .gm-panel-bet-amount{font-size:0.72em!important}
  body.in-game .gm-panel-bet-label{font-size:0.38em!important}

  /* Buttons: bigger with double-ring inset */
  body.in-game .gm-panel-controls{flex-direction:row!important;gap:8px!important;flex-shrink:0!important;margin-left:auto!important}
  body.in-game .gm-panel-btn{
    width:42px!important;height:42px!important;font-size:1em!important;
    border-radius:50%!important;
    box-shadow:0 3px 10px rgba(0,0,0,0.5),0 0 0 3px rgba(8,12,24,0.8),0 0 0 5px rgba(201,164,74,0.1)!important;
    -webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;
  }
  body.in-game .gm-panel-btn.confirm{
    width:48px!important;height:48px!important;font-size:1.15em!important;
    box-shadow:0 4px 14px rgba(74,168,74,0.3),0 0 0 3px rgba(8,12,24,0.8),0 0 0 5px rgba(107,201,107,0.15)!important;
  }

  /* Board area */
  body.in-game .gm-board-area{
    flex:1!important;width:100%!important;max-width:100%!important;
    min-height:0!important;height:0!important;
    max-height:calc(100dvh - 215px)!important;
    perspective:none!important;padding:0 2px!important;overflow:hidden!important;order:0!important;
  }
  body.in-game .board-container{
    width:100%!important;height:88%!important;
    max-width:none!important;max-height:88%!important;
    aspect-ratio:auto!important;transform:none!important;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,0.5))!important;
    margin:auto!important;
  }
  body.in-game .gm-exit{display:none!important}
  body.in-game .bg-bar{width:20px!important;min-width:20px!important}
  body.in-game .bg-piece{width:clamp(22px,7.5vw,36px)!important;height:clamp(22px,7.5vw,36px)!important}

  /* Dice on right side, button below */
  body.in-game .dice-area{
    left:auto!important;right:20px!important;top:50%!important;
    transform:translateY(-50%)!important;flex-direction:column!important;
    align-items:center!important;gap:6px!important;
  }
  body.in-game .dice-area.dice-side-left{
    right:auto!important;left:20px!important;
  }
  body.in-game .dice-arena{flex-direction:row!important;gap:12px!important}
  body.in-game .dice-img-wrap{width:77px!important;height:77px!important}
  body.in-game .btn-dice{font-size:0.72em!important;padding:5px 14px!important;border-radius:16px!important}

  body.in-game .bg-bearoff{width:24px!important}
  body.in-game #floatingConfirm{bottom:auto!important;top:50%!important;transform:translate(-50%,-50%)!important;pointer-events:auto!important}
}

/* Floating confirm button - GLOBAL */
.g-float-confirm{
  padding:10px 24px!important;border-radius:22px!important;border:none!important;
  background:linear-gradient(145deg,#2a8b3a,#1e6a2e)!important;color:#fff!important;
  font-size:14px!important;font-weight:800!important;font-family:Rubik,sans-serif!important;
  cursor:pointer!important;box-shadow:0 4px 16px rgba(42,139,58,0.4),0 0 0 2px rgba(107,201,107,0.25)!important;
  display:inline-flex!important;align-items:center!important;gap:4px!important;
  transition:transform 0.12s,box-shadow 0.12s!important;pointer-events:auto!important;
  -webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;
}
.g-float-confirm:active{transform:scale(0.93)!important;box-shadow:0 2px 8px rgba(42,139,58,0.3)!important}
@keyframes confirmGlow{0%,100%{box-shadow:0 4px 16px rgba(42,139,58,0.4),0 0 0 2px rgba(107,201,107,0.25)}50%{box-shadow:0 4px 20px rgba(42,139,58,0.6),0 0 0 4px rgba(107,201,107,0.35)}}
.g-float-confirm.pulse{animation:confirmGlow 1.2s ease infinite!important}
#floatingConfirm{pointer-events:auto!important;z-index:500!important}

/* Same for JS class */
body.portrait-mode.in-game .game-container{flex-direction:column!important;gap:0!important;padding:0!important;max-width:100%!important;align-items:stretch!important;justify-content:flex-start!important}
body.portrait-mode.in-game .gm-panel-left{order:-1!important;flex-direction:row!important;width:100%!important;height:auto!important;min-width:unset!important;padding:2px 8px!important;margin-top:10px!important;gap:4px!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;flex-wrap:nowrap!important;background:linear-gradient(180deg,rgba(14,10,4,0.98),rgba(20,14,6,0.95))!important;border-bottom:1px solid rgba(201,164,74,0.12)!important;min-height:unset!important;max-height:unset!important;position:relative!important;overflow:visible!important}
body.portrait-mode.in-game .gm-panel-right{order:1!important;flex-direction:row!important;width:100%!important;height:auto!important;min-width:unset!important;padding:2px 8px 52px 8px!important;gap:4px!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;flex-wrap:nowrap!important;background:linear-gradient(0deg,rgba(14,10,4,0.98),rgba(20,14,6,0.95))!important;border-top:1px solid rgba(201,164,74,0.12)!important;min-height:unset!important;max-height:unset!important}
body.tg-mode.portrait-mode.in-game .gm-panel-right{padding-bottom:calc(var(--tg-safe-bottom, 20px) + 52px)!important}
body.tg-mode.portrait-mode.in-game .gm-panel-left{margin-top:calc(var(--tg-total-top, 36px) + 10px)!important}
body.tg-mode.tg-ios.portrait-mode.in-game .gm-panel-right{padding-bottom:calc(max(var(--tg-safe-bottom, 0px), 20px) + 52px)!important}
body.tg-mode.tg-ios.portrait-mode.in-game .gm-panel-left{margin-top:calc(max(var(--tg-total-top, 0px), 36px) + 10px)!important}
body.tg-mode.portrait-mode.in-game .gm-panel-btn{width:46px!important;height:46px!important;font-size:1.1em!important}
body.portrait-mode.in-game .gm-panel-left>div[style*="flex:1"],body.portrait-mode.in-game .gm-panel-right>div[style*="flex:1"]{display:none!important}
body.portrait-mode.in-game .gm-pcard{flex-direction:row!important;gap:4px!important;align-items:center!important;padding:0!important;flex-shrink:1!important;min-width:0!important}
body.portrait-mode.in-game .gm-pcard-ava{width:26px!important;height:26px!important;font-size:11px!important;flex-shrink:0!important}
body.in-game .gm-pcard-ava .mini-die{width:13px;height:13px}
body.in-game .gm-pcard-ava .string-v{width:28px;height:14px}
body.in-game .gm-pcard-ava .dice-pair{gap:2px}
body.portrait-mode.in-game .gm-pcard-ava .mini-die{width:11px;height:11px}
body.portrait-mode.in-game .gm-pcard-ava .string-v{width:24px;height:12px}
body.portrait-mode.in-game .gm-ava-wrap .mini-die{width:11px;height:11px}
body.portrait-mode.in-game .gm-ava-wrap .string-v{width:24px;height:12px}
body.portrait-mode.in-game .gm-pcard-name{font-size:0.65em!important;max-width:55px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body.portrait-mode.in-game .gm-pcard-color{width:6px!important;height:6px!important}
body.portrait-mode.in-game .gm-panel-timer{width:32px!important;height:32px!important;flex-shrink:0!important;font-size:0.78em!important}
body.portrait-mode.in-game .gm-panel-pip{font-size:0.5em!important;padding:1px 4px!important;flex-shrink:0!important}
body.portrait-mode.in-game .gm-panel-bet{
  position:absolute!important;
  bottom:-18px!important;left:50%!important;transform:translateX(-50%)!important;
  z-index:25!important;
  padding:1px 10px!important;
  background:linear-gradient(145deg,rgba(15,12,8,0.95),rgba(30,25,15,0.9))!important;
  border-radius:0 0 8px 8px!important;
  border:1px solid rgba(201,164,74,0.3)!important;
  border-top:none!important;
  box-shadow:0 3px 8px rgba(0,0,0,0.4)!important;
  flex-shrink:0!important;
}
body.portrait-mode.in-game .gm-panel-bet-amount{font-size:0.6em!important}
body.portrait-mode.in-game .gm-panel-bet-label{font-size:0.3em!important}
body.portrait-mode.in-game .gm-panel-controls{flex-direction:row!important;gap:8px!important;flex-shrink:0!important;margin-left:auto!important}
body.portrait-mode.in-game .gm-panel-btn{width:42px!important;height:42px!important;font-size:1em!important;border-radius:50%!important;box-shadow:0 3px 10px rgba(0,0,0,0.5),0 0 0 3px rgba(8,12,24,0.8),0 0 0 5px rgba(201,164,74,0.1)!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important}
body.portrait-mode.in-game .gm-panel-btn.confirm{width:48px!important;height:48px!important;font-size:1.15em!important;box-shadow:0 4px 14px rgba(74,168,74,0.3),0 0 0 3px rgba(8,12,24,0.8),0 0 0 5px rgba(107,201,107,0.15)!important}
body.portrait-mode.in-game .gm-board-area{flex:1!important;width:100%!important;max-width:100%!important;min-height:0!important;height:0!important;max-height:calc(100dvh - 215px)!important;perspective:none!important;padding:6px 2px!important;overflow:hidden!important;order:0!important}
body.portrait-mode.in-game .board-container{width:100%!important;height:88%!important;max-width:none!important;max-height:88%!important;aspect-ratio:auto!important;transform:none!important;margin:auto!important}
body.portrait-mode.in-game .gm-exit{display:none!important}
body.portrait-mode.in-game .bg-bar{width:20px!important;min-width:20px!important}
body.portrait-mode.in-game .bg-piece{width:clamp(22px,7.5vw,36px)!important;height:clamp(22px,7.5vw,36px)!important}
body.portrait-mode.in-game .dice-area{left:auto!important;right:16px!important;top:50%!important;transform:translateY(-50%)!important;flex-direction:column!important;align-items:center!important;gap:6px!important}
body.portrait-mode.in-game .dice-area.dice-side-left{right:auto!important;left:16px!important}
body.portrait-mode.in-game .dice-arena{flex-direction:row!important;gap:12px!important}
body.portrait-mode.in-game .dice-img-wrap{width:77px!important;height:77px!important}
body.portrait-mode.in-game #floatingConfirm{bottom:auto!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:500!important}
body.portrait-mode.in-game .g-float-confirm{font-size:15px!important;padding:12px 28px!important}
body.portrait-mode.in-game #undoFloating{margin-top:4px!important}
body.portrait-mode.in-game .btn-dice{font-size:0.72em!important;padding:5px 14px!important;border-radius:16px!important}

/* ═══ REARRANGED STATE (app.js moved my card to top panel) ═══ */
/* Top bar: opponent-card VS my-card | Bottom bar: all buttons */
body.pt-rearranged.in-game .gm-panel-left{
  justify-content:center!important;
  padding:44px 6px 2px 6px!important;gap:0!important;
  flex-wrap:nowrap!important;
  position:relative!important;overflow:visible!important;
}
/* Hide opponent's empty controls div */
body.pt-rearranged.in-game .gm-panel-left .gm-panel-controls{
  display:none!important;
}
/* Hide spacers but show them as nothing */
body.pt-rearranged.in-game .gm-panel-left>div[style*="flex:1"]{
  display:none!important;
}

/* ═══ VS BADGE ═══ */
.pt-vs-badge{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;flex-shrink:0!important;
  padding:0 6px!important;
}
.pt-vs-badge span{
  font-size:0.65em!important;font-weight:900!important;
  color:#ff4444!important;
  text-shadow:0 0 8px rgba(255,50,50,0.6),0 0 20px rgba(255,50,50,0.3)!important;
  letter-spacing:3px!important;
  font-family:'Cinzel',serif!important;
  animation:ptVsPulse 2s ease-in-out infinite!important;
}
@keyframes ptVsPulse{
  0%,100%{text-shadow:0 0 8px rgba(255,50,50,0.6),0 0 20px rgba(255,50,50,0.3)}
  50%{text-shadow:0 0 14px rgba(255,50,50,0.9),0 0 30px rgba(255,50,50,0.5),0 0 40px rgba(255,0,0,0.2)}
}

/* ═══ ACTIVE TURN on cards ═══ */
body.pt-rearranged.in-game .gm-pcard.active-turn{
  background:rgba(34,211,238,0.1)!important;
  border-radius:10px!important;
  box-shadow:0 0 12px rgba(34,211,238,0.2),inset 0 0 6px rgba(34,211,238,0.05)!important;
  padding:3px 5px!important;
  border:1px solid rgba(34,211,238,0.3)!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}
body.pt-rearranged.in-game .gm-pcard:not(.active-turn){
  opacity:0.55!important;
  padding:3px 5px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}
body.pt-rearranged.in-game .gm-pcard.active-turn .gm-panel-timer{
  border:2px solid #22d3ee!important;
  box-shadow:0 0 10px rgba(34,211,238,0.4)!important;
  animation:tP 2s ease-in-out infinite!important;
}

/* Bottom panel: all controls centered, bigger gaps */
body.pt-rearranged.in-game .gm-panel-right{
  justify-content:center!important;
  padding:6px 12px 48px 12px!important;
}
@supports(padding-bottom:env(safe-area-inset-bottom)){
  body.pt-rearranged.in-game .gm-panel-right{
    padding-bottom:max(48px,calc(env(safe-area-inset-bottom,0px)+10px))!important;
  }
}
body.pt-rearranged.in-game .gm-panel-right .gm-panel-controls{
  margin-left:0!important;gap:10px!important;
  justify-content:center!important;width:100%!important;
}
body.pt-rearranged.in-game .gm-panel-right .gm-pcard,
body.pt-rearranged.in-game .gm-panel-right .gm-panel-bet{
  display:none!important;
}
/* Board: slightly more compressed */
body.pt-rearranged.in-game .gm-board-area{
  max-height:calc(100dvh - 215px)!important;
  padding:4px 2px!important;
}
body.pt-rearranged.in-game .board-container{
  height:88%!important;max-height:88%!important;margin:auto!important;
}

/* ═══ Bet display below top bar ═══ */
body.pt-rearranged.in-game .gm-panel-left .gm-panel-bet{
  position:absolute!important;
  bottom:-18px!important;left:50%!important;transform:translateX(-50%)!important;
  z-index:25!important;
  padding:1px 10px!important;
  background:linear-gradient(145deg,rgba(15,12,8,0.95),rgba(30,25,15,0.9))!important;
  border-radius:0 0 8px 8px!important;
  border:1px solid rgba(201,164,74,0.3)!important;
  border-top:none!important;
  box-shadow:0 3px 8px rgba(0,0,0,0.4)!important;
}
body.pt-rearranged.in-game .gm-panel-left .gm-panel-bet-amount{
  font-size:0.6em!important;color:#ffd700!important;font-weight:800!important;
}
body.pt-rearranged.in-game .gm-panel-left .gm-panel-bet-label{
  font-size:0.3em!important;color:#c9a44a!important;
}

/* VS Splash & History animations */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes scaleIn { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes vsPulse { from{transform:scale(1);text-shadow:0 0 20px rgba(255,50,50,0.6)} to{transform:scale(1.15);text-shadow:0 0 30px rgba(255,50,50,0.9)} }

/* Waiting overlay */
@keyframes waitingPulse { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.15);opacity:0.2} }
.waiting-dice { font-size:20px;animation:waitingDiceSpin 1.5s ease-in-out infinite; display:inline-block; }
@keyframes waitingDiceSpin { 0%{transform:rotate(0deg)} 25%{transform:rotate(90deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(270deg)} 100%{transform:rotate(360deg)} }
.waiting-dots::after { content:''; animation:waitingDots 1.5s steps(4,end) infinite; }
@keyframes waitingDots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

/* ═══════════════════════════════════════════════ */
/* Old skin-wood removed — new design is default */

/* Home indicator pulse */
@keyframes homePulse { 0%,100%{opacity:0.85;transform:translateY(50%) scale(1)} 50%{opacity:1;transform:translateY(50%) scale(1.05)} }

@keyframes homePulse2 { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.03)} }
@keyframes dirPulse { 0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 6px 30px rgba(0,0,0,0.6),0 0 40px rgba(201,164,74,0.15)} 50%{transform:translate(-50%,-50%) scale(1.04);box-shadow:0 6px 30px rgba(0,0,0,0.6),0 0 60px rgba(201,164,74,0.3)} }

/* Move glow highlights - magic smoke */
.bg-glow-from .bg-tri{
  box-shadow:0 0 20px 8px rgba(255,120,30,0.7), 0 0 40px 15px rgba(255,80,0,0.4), inset 0 0 15px rgba(255,150,50,0.5)!important;
  filter:brightness(1.6) saturate(1.3)!important;
  transition:box-shadow 0.2s, filter 0.2s!important;
}
.bg-glow-from{
  animation:glowPulseFrom 0.6s ease-out!important;
}
.bg-glow-to .bg-tri{
  box-shadow:0 0 20px 8px rgba(50,220,80,0.7), 0 0 40px 15px rgba(30,200,60,0.4), inset 0 0 15px rgba(80,255,100,0.5)!important;
  filter:brightness(1.6) saturate(1.3)!important;
  transition:box-shadow 0.2s, filter 0.2s!important;
}
.bg-glow-to{
  animation:glowPulseTo 0.6s ease-out!important;
}
@keyframes glowPulseFrom{
  0%{filter:drop-shadow(0 0 0px rgba(255,120,30,0))}
  20%{filter:drop-shadow(0 0 25px rgba(255,120,30,0.9)) drop-shadow(0 0 50px rgba(255,80,0,0.5))}
  100%{filter:drop-shadow(0 0 0px rgba(255,120,30,0))}
}
@keyframes glowPulseTo{
  0%{filter:drop-shadow(0 0 0px rgba(50,220,80,0))}
  20%{filter:drop-shadow(0 0 25px rgba(50,220,80,0.9)) drop-shadow(0 0 50px rgba(30,200,60,0.5))}
  100%{filter:drop-shadow(0 0 0px rgba(50,220,80,0))}
}

/* ═══ SHORT SCREEN FIX (16:9 phones, iPhone SE, old Galaxy) ═══ */
/* Only applies in PORTRAIT - landscape has its own override */
@media (max-height: 700px) and (orientation:portrait) {
  body.in-game .gm-board-area{
    max-height:calc(100dvh - 180px)!important;
    padding:0 2px!important;
  }
  body.in-game .board-container{
    height:82%!important;max-height:82%!important;
  }
  body.in-game .gm-panel{
    padding:2px 8px!important;min-height:0!important;
  }
  body.in-game .player-card{
    padding:2px 6px!important;gap:4px!important;
  }
  body.in-game .player-name{font-size:11px!important}
  body.in-game .player-timer{font-size:11px!important}
  body.in-game .gm-panel-btn{width:34px!important;height:34px!important;font-size:0.85em!important}
  body.in-game .gm-panel-btn.confirm{width:38px!important;height:38px!important}
  body.in-game .bg-piece{width:clamp(18px,6.5vw,30px)!important;height:clamp(18px,6.5vw,30px)!important}
  body.in-game .btn-dice{font-size:0.65em!important;padding:4px 10px!important}
  body.in-game .dice-img-wrap{width:63px!important;height:63px!important}
  /* Portrait mode adjustments */
  body.portrait-mode.in-game .gm-board-area{max-height:calc(100dvh - 180px)!important;padding:2px 2px!important}
  body.portrait-mode.in-game .board-container{height:82%!important;max-height:82%!important}
  body.pt-rearranged.in-game .gm-board-area{max-height:calc(100dvh - 180px)!important}
  body.pt-rearranged.in-game .board-container{height:82%!important;max-height:82%!important}
}

/* Extra short screens (under 600px - very old/small phones, portrait only) */
@media (max-height: 600px) and (orientation:portrait) {
  body.in-game .gm-board-area{
    max-height:calc(100dvh - 150px)!important;
  }
  body.in-game .board-container{
    height:78%!important;max-height:78%!important;
  }
  body.in-game .gm-panel{padding:1px 6px!important}
  body.in-game .player-card{padding:1px 4px!important}
  body.in-game .bg-piece{width:clamp(14px,5.5vw,24px)!important;height:clamp(14px,5.5vw,24px)!important}
  body.portrait-mode.in-game .gm-board-area{max-height:calc(100dvh - 150px)!important}
  body.portrait-mode.in-game .board-container{height:78%!important;max-height:78%!important}
  body.pt-rearranged.in-game .gm-board-area{max-height:calc(100dvh - 150px)!important}
  body.pt-rearranged.in-game .board-container{height:78%!important;max-height:78%!important}
}

/* ═══ DOUBLING CUBE ═══ */
.doubling-cube{
  position:absolute!important;left:50%;transform:translateX(-50%);z-index:10;
  width:30px;height:30px;cursor:pointer;transition:top 0.4s ease, bottom 0.4s ease, opacity 0.3s;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.doubling-cube.cube-center{top:50%;margin-top:-15px}
.doubling-cube.cube-top{top:6px;margin-top:0}
.doubling-cube.cube-bottom{top:auto;bottom:6px;margin-top:0}
.doubling-cube-face{
  width:100%;height:100%;border-radius:18%;
  background:linear-gradient(155deg,#5e3822 0%,#3a200e 50%,#4e2c18 100%);
  border:1px solid rgba(201,164,74,0.3);
  box-shadow:inset 0 2px 3px rgba(255,220,160,0.15),inset 0 -2px 4px rgba(0,0,0,0.5),0 3px 8px rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;color:#c9a44a;
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
  position:relative;overflow:hidden;
}
.doubling-cube-face::before{
  content:'';position:absolute;top:-5%;left:-10%;width:60%;height:50%;
  background:linear-gradient(125deg,rgba(255,255,255,0.15) 0%,transparent 45%);
  border-radius:18%;z-index:1;pointer-events:none;
}
.doubling-cube.cube-active .doubling-cube-face{
  border-color:rgba(100,200,100,0.5);
  box-shadow:inset 0 2px 3px rgba(255,220,160,0.15),inset 0 -2px 4px rgba(0,0,0,0.5),0 0 12px rgba(100,200,100,0.3),0 3px 8px rgba(0,0,0,0.5);
  animation:cubeGlow 2s ease-in-out infinite;
}
.doubling-cube.cube-disabled{opacity:0.4;cursor:default;pointer-events:none}
@keyframes cubeGlow{0%,100%{box-shadow:inset 0 2px 3px rgba(255,220,160,0.15),inset 0 -2px 4px rgba(0,0,0,0.5),0 0 8px rgba(100,200,100,0.2),0 3px 8px rgba(0,0,0,0.5)}50%{box-shadow:inset 0 2px 3px rgba(255,220,160,0.15),inset 0 -2px 4px rgba(0,0,0,0.5),0 0 16px rgba(100,200,100,0.45),0 3px 8px rgba(0,0,0,0.5)}}

/* Doubling proposal overlay */
.double-proposal-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
.double-proposal-card{
  background:linear-gradient(145deg,#1a2744,#0d1828);
  border:1px solid rgba(201,164,74,0.3);border-radius:16px;
  padding:24px 28px;text-align:center;max-width:300px;width:90%;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
}
.double-proposal-card .cube-preview{
  width:50px;height:50px;margin:0 auto 12px;border-radius:22%;
  background:linear-gradient(155deg,#5e3822,#3a200e,#4e2c18);
  border:2px solid rgba(201,164,74,0.4);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:900;color:#c9a44a;
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
}
.double-proposal-card h3{color:#c9a44a;font-size:16px;margin:0 0 6px}
.double-proposal-card p{color:#aaa;font-size:13px;margin:0 0 16px}
.double-proposal-card .btn-row{display:flex;gap:10px;justify-content:center}
.double-proposal-card .btn-accept{
  padding:8px 24px;border-radius:8px;border:none;cursor:pointer;font-weight:700;font-size:13px;
  background:linear-gradient(145deg,#2e7d32,#1b5e20);color:#fff;
  box-shadow:0 2px 8px rgba(46,125,50,0.3);
}
.double-proposal-card .btn-decline{
  padding:8px 24px;border-radius:8px;border:none;cursor:pointer;font-weight:700;font-size:13px;
  background:linear-gradient(145deg,#c62828,#8b0000);color:#fff;
  box-shadow:0 2px 8px rgba(198,40,40,0.3);
}

/* === DICE ORNAMENT ON AVATAR === */
.dice-ornament{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  z-index:15;pointer-events:none;margin-top:-2px;
}
.dice-pendulum{
  transform-origin:top center;
  animation:pendulumSwing 3.5s ease-in-out infinite;
  display:flex;flex-direction:column;align-items:center;
}
@keyframes pendulumSwing{
  0%{transform:rotate(-4deg)}25%{transform:rotate(3.5deg)}
  50%{transform:rotate(-3deg)}75%{transform:rotate(2.5deg)}100%{transform:rotate(-4deg)}
}
.string-v{overflow:visible}
.dice-pair{display:flex;gap:3px;align-items:flex-start}
.mini-die-wrap{position:relative}
.mini-die-left{animation:dieSwayL 3.5s ease-in-out infinite;transform-origin:top center}
.mini-die-right{animation:dieSwayR 3.5s ease-in-out 0.15s infinite;transform-origin:top center}
@keyframes dieSwayL{0%{transform:rotate(-2deg)}30%{transform:rotate(2.5deg)}60%{transform:rotate(-1.5deg)}100%{transform:rotate(-2deg)}}
@keyframes dieSwayR{0%{transform:rotate(2deg)}35%{transform:rotate(-2deg)}65%{transform:rotate(1.5deg)}100%{transform:rotate(2deg)}}

/* Mini dice 14px */
.mini-die{width:14px;height:14px;position:relative;border-radius:3px;overflow:hidden}
.mini-grid{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:100%;height:100%;padding:15%;place-items:center;position:relative;z-index:2}
.md{width:0;height:0;border-radius:50%}
.md.on{width:55%;height:55%;border-radius:50%}
.mini-die::before{content:'';position:absolute;top:0;left:0;width:60%;height:50%;background:linear-gradient(135deg,rgba(255,255,255,0.25),transparent 60%);border-radius:3px 0 0 0;z-index:5;pointer-events:none}
.mini-die::after{content:'';position:absolute;width:2.5px;height:2.5px;top:15%;left:18%;background:radial-gradient(circle,rgba(255,255,255,0.7),transparent 60%);border-radius:50%;animation:miniSparkle 3s ease-in-out infinite;z-index:6}
@keyframes miniSparkle{0%,100%{opacity:0.1;transform:scale(0.5)}40%{opacity:0.9;transform:scale(1.2)}}

/* Mini skin: Default */
.mini-default{background:radial-gradient(ellipse 45% 35% at 28% 22%,rgba(255,255,255,0.2),transparent 55%),linear-gradient(145deg,#fffdf8 0%,#f8eed8 40%,#eedcc0 100%);border:0.5px solid rgba(180,160,130,0.5);box-shadow:inset 0 1px 1px rgba(255,255,255,0.5),inset 0 -1px 2px rgba(0,0,0,0.05),0 2px 5px rgba(0,0,0,0.3)}
.mini-default .md.on{background:radial-gradient(circle at 38% 32%,#8b2020,#3a0808);box-shadow:inset 0 0.5px 0.5px rgba(255,255,255,0.15)}

/* Mini skin: Black Gold */
.mini-blackgold{background:radial-gradient(ellipse 45% 35% at 28% 22%,rgba(255,255,255,0.3),transparent 60%),linear-gradient(160deg,#1a1a20 0%,#0d0d11 30%,#050507 55%,#101015 100%);border:0.5px solid rgba(255,255,255,0.06);box-shadow:inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 2px rgba(0,0,0,0.8),0 2px 6px rgba(0,0,0,0.7)}
.mini-blackgold .md.on{background:radial-gradient(circle at 42% 38%,#ffe680 0%,#daa520 30%,#8b6914 70%,#5c3d0e 100%);box-shadow:0 0 2px rgba(218,165,32,0.4),inset 0 0.5px 1px rgba(0,0,0,0.4)}

/* Mini skin: Ruby */
.mini-ruby{background:radial-gradient(ellipse 50% 40% at 30% 25%,rgba(255,150,150,0.25),transparent 55%),linear-gradient(155deg,rgba(180,20,30,0.88) 0%,rgba(100,5,12,0.95) 50%,rgba(160,15,25,0.9) 100%);border:0.5px solid rgba(255,120,120,0.12);box-shadow:inset 0 1px 2px rgba(255,180,180,0.2),inset 0 -1px 2px rgba(60,0,0,0.6),0 2px 6px rgba(120,0,10,0.4)}
.mini-ruby .md.on{background:radial-gradient(circle at 42% 38%,#ffe48a 0%,#daa520 30%,#8b6914 80%);box-shadow:0 0 2px rgba(255,200,50,0.4),inset 0 0.5px 1px rgba(0,0,0,0.3)}

/* Mini skin: Ice */
.mini-ice{background:radial-gradient(ellipse 40% 30% at 30% 22%,rgba(255,255,255,0.25),transparent 50%),linear-gradient(158deg,rgba(180,215,240,0.72) 0%,rgba(100,165,215,0.84) 40%,rgba(160,205,240,0.74) 100%);border:0.5px solid rgba(200,230,255,0.2);box-shadow:inset 0 1px 2px rgba(255,255,255,0.3),inset 0 -1px 2px rgba(40,80,120,0.4),0 2px 6px rgba(60,120,180,0.2)}
.mini-ice .md.on{background:radial-gradient(circle at 44% 40%,#ffffff 0%,#c0ddf5 35%,#6ca0cc 80%);box-shadow:0 0 2px rgba(140,200,255,0.4)}

/* Mini skin: Neon */
.mini-neon{background:linear-gradient(160deg,#141418 0%,#080809 50%,#111114 100%);border:0.5px solid rgba(160,80,255,0.3);box-shadow:inset 0 0.5px 0 rgba(160,80,255,0.3),inset 0 -0.5px 0 rgba(0,200,255,0.2),0 0 4px rgba(160,80,255,0.15),0 2px 5px rgba(0,0,0,0.6)}
.mini-neon::before{background:none!important}
.mini-neon .md.on{background:radial-gradient(circle,#e0f8ff 0%,#00e5ff 20%,#0088a3 60%,#006680 100%);box-shadow:0 0 3px rgba(0,229,255,0.6),0 0 1px rgba(255,255,255,0.5);animation:miniNeonDot 3s ease-in-out infinite}
@keyframes miniNeonDot{0%,100%{box-shadow:0 0 2px rgba(0,229,255,0.5)}50%{box-shadow:0 0 5px rgba(0,229,255,0.8),0 0 1px rgba(255,255,255,0.6)}}

/* Mini skin: Emerald */
.mini-emerald{background:radial-gradient(ellipse 50% 40% at 32% 25%,rgba(120,255,180,0.15),transparent 50%),linear-gradient(155deg,rgba(16,80,50,0.95) 0%,rgba(6,42,28,0.98) 45%,rgba(20,85,55,0.94) 100%);border:0.5px solid rgba(100,200,150,0.12);box-shadow:inset 0 1px 2px rgba(150,255,200,0.15),inset 0 -1px 2px rgba(0,20,10,0.7),0 2px 6px rgba(0,40,20,0.4)}
.mini-emerald .md.on{background:radial-gradient(circle at 44% 40%,#ffe680 0%,#daa520 30%,#8b6914 70%,#5c3d0e 100%);box-shadow:0 0 2px rgba(218,165,32,0.35),inset 0 0.5px 1px rgba(0,0,0,0.4)}

/* Mini skin: Magma */
.mini-magma{background:linear-gradient(35deg,transparent 22%,rgba(255,100,20,0.15) 23%,transparent 26%),linear-gradient(145deg,transparent 40%,rgba(255,120,30,0.12) 41%,transparent 44%),linear-gradient(160deg,#1a1412 0%,#0a0806 50%,#15100c 100%);border:0.5px solid rgba(255,80,20,0.12);box-shadow:inset 0 -1px 2px rgba(0,0,0,0.7),0 2px 6px rgba(0,0,0,0.6),0 0 6px rgba(255,60,10,0.06)}
.mini-magma::before{background:linear-gradient(135deg,rgba(255,150,80,0.1),transparent 60%)!important}
.mini-magma .md.on{background:radial-gradient(circle at 48% 45%,#ffb830 0%,#ff8c00 25%,#e05500 50%,#801800 100%);box-shadow:0 0 3px rgba(255,100,20,0.5),0 0 1px rgba(255,180,80,0.5);animation:miniMagmaDot 3s ease-in-out infinite}
@keyframes miniMagmaDot{0%,100%{box-shadow:0 0 2px rgba(255,100,20,0.4)}50%{box-shadow:0 0 5px rgba(255,100,20,0.7),0 0 1.5px rgba(255,180,80,0.6)}}

/* Mini skin: Marble */
.mini-marble{background:linear-gradient(42deg,transparent 25%,rgba(140,135,125,0.1) 26%,transparent 29%),linear-gradient(128deg,transparent 42%,rgba(150,140,130,0.08) 43%,transparent 46%),radial-gradient(ellipse 45% 35% at 30% 24%,rgba(255,255,255,0.25),transparent 50%),linear-gradient(158deg,#f5f0e6 0%,#e4dccf 40%,#eee8dc 100%);border:0.5px solid rgba(200,190,170,0.35);box-shadow:inset 0 1px 2px rgba(255,255,255,0.5),inset 0 -1px 2px rgba(100,90,70,0.1),0 2px 5px rgba(0,0,0,0.2)}
.mini-marble::before{background:linear-gradient(135deg,rgba(255,255,255,0.35),transparent 55%)!important}
.mini-marble .md.on{background:radial-gradient(circle at 46% 42%,#3a3832 0%,#1e1c18 50%,#0e0d0b 100%);box-shadow:inset 0 0.5px 1px rgba(0,0,0,0.4),0 0 1px rgba(0,0,0,0.2)}

/* Smaller ornament for small game avatars */
.gm-ava-wrap .dice-ornament{margin-top:-1px}
.gm-ava-wrap .string-v{width:30px;height:16px}
.gm-ava-wrap .mini-die{width:13px;height:13px;border-radius:2px}
.gm-ava-wrap .dice-pair{gap:2px}
.gm-ava-wrap .mini-die::after{display:none}

/* VS splash pcard avatar ornament */
.gm-pcard-ava .dice-ornament{margin-top:-1px;z-index:20}
.gm-pcard-ava .string-v{width:34px;height:20px}
.gm-pcard-ava .mini-die{width:15px;height:15px;border-radius:3px}
.gm-pcard-ava .dice-pair{gap:3px}
.gm-pcard-ava .mini-die::after{display:none}

/* Lobby header avatar ornament */
.g-avatar-wrap .dice-ornament{margin-top:-1px}
.g-avatar-wrap .string-v{width:30px;height:16px}
.g-avatar-wrap .mini-die{width:13px;height:13px;border-radius:2.5px}
.g-avatar-wrap .dice-pair{gap:2px}
.g-avatar-wrap .mini-die::after{display:none}

/* Profile page avatar ornament - bigger */
.profile-avatar-large .dice-ornament{margin-top:-2px}
.profile-avatar-large .string-v{width:34px;height:22px}
.profile-avatar-large .mini-die{width:14px;height:14px;border-radius:3px}
.profile-avatar-large .dice-pair{gap:3px}

/* ═══════════════════════════════
   DICE SHOP 3D CUBES
   ═══════════════════════════════ */
.shop-stage{width:50px;height:50px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.shop-cube{width:46px;height:46px;position:relative;transform:rotate(-2deg)}
.shop-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.shop-grid{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:72%;height:72%;place-items:center;position:relative;z-index:3}
.sd{width:0;height:0;border-radius:50%}
.sd.on{width:62%;height:62%;position:relative;border-radius:50%}
.shop-shadow{width:55px;height:10px;margin:0 auto;background:radial-gradient(ellipse,rgba(0,0,0,0.35) 0%,transparent 70%);border-radius:50%;filter:blur(2px)}

/* ═══ SHOP SKIN: BLACK GOLD ═══ */
.shop-blackgold .shop-face{border-radius:22%;background:radial-gradient(ellipse 45% 35% at 28% 22%,rgba(255,255,255,0.32),rgba(255,255,255,0.07) 40%,transparent 65%),radial-gradient(ellipse 60% 45% at 70% 78%,rgba(255,255,255,0.05),transparent 50%),linear-gradient(140deg,rgba(55,55,65,0.45) 0%,rgba(20,20,25,0.15) 15%,transparent 35%,transparent 65%,rgba(35,35,45,0.12) 85%,rgba(55,55,65,0.25) 100%),linear-gradient(160deg,#1a1a20 0%,#0d0d11 20%,#050507 45%,#09090d 70%,#101015 100%);border:1px solid rgba(255,255,255,0.06);box-shadow:inset 0 2px 3px rgba(255,255,255,0.14),inset 0 1px 1px rgba(255,255,255,0.18),inset 0 -2px 4px rgba(0,0,0,0.9),0 6px 24px rgba(0,0,0,0.8)}
.shop-blackgold .shop-face::before{content:'';position:absolute;top:-8%;left:-15%;width:70%;height:60%;background:linear-gradient(130deg,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.08) 25%,transparent 50%);border-radius:22%;z-index:5}
.shop-blackgold .shop-face::after{content:'';position:absolute;width:5px;height:5px;top:16%;left:24%;background:radial-gradient(circle,rgba(255,255,255,0.85),transparent 65%);border-radius:50%;animation:sparkPulse 3.5s ease-in-out infinite;z-index:6}
.shop-blackgold .sd.on{background:radial-gradient(circle at 45% 40%,#fff8dc 0%,#ffe680 10%,#daa520 25%,#b8860b 45%,#8b6914 70%,#5c3d0e 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,0.55),inset 0 -1px 2px rgba(255,230,128,0.35),0 0 5px rgba(218,165,32,0.35),0 0 2px rgba(255,215,0,0.5);border:0.5px solid rgba(92,61,14,0.5)}
.shop-blackgold .sd.on::before{content:'';position:absolute;top:14%;left:20%;width:44%;height:36%;background:radial-gradient(ellipse,rgba(255,250,225,0.85),rgba(255,230,140,0.4) 45%,transparent 70%);border-radius:50%}

/* ═══ SHOP SKIN: RUBY ═══ */
.shop-ruby .shop-face{border-radius:20%;background:radial-gradient(ellipse 50% 40% at 30% 25%,rgba(255,150,150,0.3),transparent 55%),radial-gradient(ellipse 40% 50% at 75% 70%,rgba(255,100,100,0.12),transparent 50%),linear-gradient(155deg,rgba(180,20,30,0.88) 0%,rgba(100,5,12,0.95) 45%,rgba(160,15,25,0.9) 100%);border:1px solid rgba(255,120,120,0.12);box-shadow:inset 0 2px 4px rgba(255,180,180,0.2),inset 0 -2px 5px rgba(60,0,0,0.7),0 6px 25px rgba(180,20,30,0.35)}
.shop-ruby .shop-face::before{content:'';position:absolute;top:-5%;left:-12%;width:65%;height:55%;background:linear-gradient(128deg,rgba(255,255,255,0.28) 0%,rgba(255,200,200,0.12) 20%,transparent 48%);border-radius:20%;z-index:5}
.shop-ruby .shop-face::after{content:'';position:absolute;width:5px;height:5px;top:18%;left:22%;background:radial-gradient(circle,rgba(255,220,220,0.9),transparent 60%);border-radius:50%;animation:sparkPulse 3s ease-in-out 0.5s infinite;z-index:6}
.shop-ruby .sd.on{background:radial-gradient(circle at 42% 38%,#fffaf0 0%,#ffe48a 12%,#daa520 28%,#8b6914 75%);box-shadow:inset 0 2px 3px rgba(0,0,0,0.4),0 0 6px rgba(255,200,50,0.3);border:0.5px solid rgba(120,80,10,0.4)}
.shop-ruby .sd.on::before{content:'';position:absolute;top:12%;left:18%;width:48%;height:38%;background:radial-gradient(ellipse,rgba(255,250,230,0.85),transparent 72%);border-radius:50%}

/* ═══ SHOP SKIN: ICE ═══ */
.shop-ice .shop-face{border-radius:19%;background:radial-gradient(ellipse 40% 30% at 30% 22%,rgba(255,255,255,0.3),transparent 55%),linear-gradient(45deg,transparent 30%,rgba(200,230,255,0.08) 31%,transparent 32%),linear-gradient(158deg,rgba(180,215,240,0.7) 0%,rgba(100,165,215,0.82) 35%,rgba(160,205,240,0.72) 100%);border:1px solid rgba(200,230,255,0.2);box-shadow:inset 0 2px 4px rgba(255,255,255,0.3),inset 0 -2px 4px rgba(40,80,120,0.5),0 6px 25px rgba(60,120,180,0.2)}
.shop-ice .shop-face::before{content:'';position:absolute;top:-6%;left:-10%;width:60%;height:50%;background:linear-gradient(125deg,rgba(255,255,255,0.35) 0%,rgba(220,240,255,0.15) 22%,transparent 45%);border-radius:19%;z-index:5}
.shop-ice .shop-face::after{content:'';position:absolute;width:4px;height:4px;top:14%;left:20%;background:radial-gradient(circle,rgba(255,255,255,0.95),transparent 55%);border-radius:50%;animation:sparkPulse 4s ease-in-out 1s infinite;z-index:6}
.shop-ice .sd.on{background:radial-gradient(circle at 44% 40%,#ffffff 0%,#c0ddf5 30%,#6ca0cc 80%);box-shadow:inset 0 2px 3px rgba(40,80,130,0.35),0 0 6px rgba(140,200,255,0.35);border:0.5px solid rgba(100,160,220,0.3)}
.shop-ice .sd.on::before{content:'';position:absolute;top:10%;left:16%;width:50%;height:40%;background:radial-gradient(ellipse,rgba(255,255,255,0.9),transparent 72%);border-radius:50%}

/* ═══ SHOP SKIN: NEON ═══ */
.shop-neon .shop-face{border-radius:16%;background:repeating-linear-gradient(0deg,transparent 0px,transparent 9px,rgba(160,80,255,0.02) 9px,transparent 10px),repeating-linear-gradient(90deg,transparent 0px,transparent 9px,rgba(160,80,255,0.02) 9px,transparent 10px),linear-gradient(160deg,#141418 0%,#080809 50%,#111114 100%);border:1px solid rgba(160,80,255,0.2);box-shadow:inset 0 1px 0px rgba(160,80,255,0.3),inset 0 -1px 0px rgba(0,200,255,0.15),0 0 8px rgba(160,80,255,0.2),0 6px 20px rgba(0,0,0,0.7)}
.shop-neon .shop-face::before{content:'';position:absolute;inset:-1px;border-radius:16%;border:1px solid transparent;background:linear-gradient(135deg,rgba(160,80,255,0.3),rgba(0,200,255,0.15),rgba(255,0,128,0.15),rgba(160,80,255,0.2)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:5;animation:neonPulse 3s ease-in-out infinite}
@keyframes neonPulse{0%,100%{opacity:0.6}50%{opacity:1}}
.shop-neon .sd.on{background:radial-gradient(circle at 50% 50%,#e0f8ff 0%,#00e5ff 15%,#0088a3 55%,#006680 80%);box-shadow:0 0 6px rgba(0,229,255,0.6),0 0 14px rgba(0,229,255,0.25),0 0 2px rgba(255,255,255,0.7);border:0.5px solid rgba(0,229,255,0.4);animation:dotGlow 3s ease-in-out infinite}
@keyframes dotGlow{0%,100%{box-shadow:0 0 6px rgba(0,229,255,0.5),0 0 2px rgba(255,255,255,0.6)}50%{box-shadow:0 0 10px rgba(0,229,255,0.8),0 0 3px rgba(255,255,255,0.8)}}
.shop-neon .sd.on::before{content:'';position:absolute;top:15%;left:22%;width:40%;height:35%;background:radial-gradient(ellipse,rgba(255,255,255,0.8),transparent 65%);border-radius:50%}

/* ═══ SHOP SKIN: EMERALD ═══ */
.shop-emerald .shop-face{border-radius:21%;background:radial-gradient(ellipse 50% 40% at 32% 25%,rgba(120,255,180,0.18),transparent 50%),linear-gradient(60deg,transparent 35%,rgba(100,220,160,0.06) 36%,transparent 38%),linear-gradient(155deg,rgba(16,80,50,0.95) 0%,rgba(6,42,28,0.98) 42%,rgba(20,85,55,0.94) 100%);border:1px solid rgba(100,200,150,0.12);box-shadow:inset 0 2px 4px rgba(150,255,200,0.15),inset 0 -2px 5px rgba(0,20,10,0.8),0 6px 25px rgba(0,40,20,0.5)}
.shop-emerald .shop-face::before{content:'';position:absolute;top:-6%;left:-12%;width:65%;height:55%;background:linear-gradient(128deg,rgba(255,255,255,0.22) 0%,rgba(180,255,220,0.08) 22%,transparent 46%);border-radius:21%;z-index:5}
.shop-emerald .shop-face::after{content:'';position:absolute;width:5px;height:5px;top:15%;left:22%;background:radial-gradient(circle,rgba(200,255,230,0.85),transparent 60%);border-radius:50%;animation:sparkPulse 3.5s ease-in-out 0.8s infinite;z-index:6}
.shop-emerald .sd.on{background:radial-gradient(circle at 44% 40%,#fff8dc 0%,#ffe680 10%,#daa520 26%,#8b6914 72%,#5c3d0e 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,0.5),0 0 5px rgba(218,165,32,0.3);border:0.5px solid rgba(92,61,14,0.5)}
.shop-emerald .sd.on::before{content:'';position:absolute;top:13%;left:20%;width:45%;height:37%;background:radial-gradient(ellipse,rgba(255,250,230,0.85),transparent 70%);border-radius:50%}

/* ═══ SHOP SKIN: MAGMA ═══ */
.shop-magma .shop-face{border-radius:19%;background:linear-gradient(35deg,transparent 22%,rgba(255,100,20,0.12) 23%,transparent 26%),linear-gradient(145deg,transparent 40%,rgba(255,120,30,0.1) 41%,transparent 44%),linear-gradient(160deg,#1a1412 0%,#0a0806 50%,#15100c 100%);border:1px solid rgba(255,80,20,0.1);box-shadow:inset 0 -2px 5px rgba(0,0,0,0.8),0 6px 25px rgba(0,0,0,0.7),0 0 30px rgba(255,60,10,0.04)}
.shop-magma .shop-face::before{content:'';position:absolute;inset:0;border-radius:19%;background:linear-gradient(35deg,transparent 22%,rgba(255,100,20,0.15) 23%,transparent 26%),linear-gradient(145deg,transparent 40%,rgba(255,120,30,0.12) 41%,transparent 44%);animation:magmaPulse 4s ease-in-out infinite;z-index:4;pointer-events:none}
@keyframes magmaPulse{0%,100%{opacity:0.4}50%{opacity:1}}
.shop-magma .sd.on{background:radial-gradient(circle at 48% 45%,#fff4e0 0%,#ffb830 12%,#ff8c00 28%,#e05500 48%,#801800 100%);box-shadow:inset 0 2px 3px rgba(0,0,0,0.3),0 0 8px rgba(255,100,20,0.5),0 0 3px rgba(255,180,80,0.6);border:0.5px solid rgba(200,60,10,0.4);animation:magmaDotPulse 3s ease-in-out infinite}
@keyframes magmaDotPulse{0%,100%{box-shadow:0 0 8px rgba(255,100,20,0.4),0 0 3px rgba(255,180,80,0.5)}50%{box-shadow:0 0 12px rgba(255,100,20,0.7),0 0 4px rgba(255,180,80,0.8)}}
.shop-magma .sd.on::before{content:'';position:absolute;top:12%;left:18%;width:46%;height:38%;background:radial-gradient(ellipse,rgba(255,250,220,0.85),transparent 70%);border-radius:50%}

/* ═══ SHOP SKIN: MARBLE ═══ */
.shop-marble .shop-face{border-radius:20%;background:linear-gradient(42deg,transparent 25%,rgba(140,135,125,0.08) 26%,transparent 29%),linear-gradient(128deg,transparent 42%,rgba(150,140,130,0.06) 43%,transparent 46%),radial-gradient(ellipse 45% 35% at 30% 24%,rgba(255,255,255,0.28),transparent 50%),linear-gradient(158deg,#f5f0e6 0%,#e4dccf 38%,#eee8dc 100%);border:1px solid rgba(200,190,170,0.35);box-shadow:inset 0 2px 3px rgba(255,255,255,0.6),inset 0 -2px 4px rgba(100,90,70,0.12),0 6px 20px rgba(0,0,0,0.25)}
.shop-marble .shop-face::before{content:'';position:absolute;top:-5%;left:-10%;width:60%;height:50%;background:linear-gradient(125deg,rgba(255,255,255,0.45) 0%,rgba(255,255,255,0.15) 25%,transparent 45%);border-radius:20%;z-index:5}
.shop-marble .shop-face::after{content:'';position:absolute;width:4px;height:4px;top:14%;left:20%;background:radial-gradient(circle,rgba(255,255,255,0.7),transparent 55%);border-radius:50%;animation:sparkPulse 4s ease-in-out 1.5s infinite;z-index:6}
.shop-marble .sd.on{background:radial-gradient(circle at 46% 42%,#3a3832 0%,#1e1c18 45%,#0e0d0b 100%);box-shadow:inset 0 2px 3px rgba(0,0,0,0.5),0 0 3px rgba(0,0,0,0.2);border:0.5px solid rgba(60,55,45,0.3)}
.shop-marble .sd.on::before{content:'';position:absolute;top:14%;left:20%;width:42%;height:34%;background:radial-gradient(ellipse,rgba(80,76,68,0.6),transparent 65%);border-radius:50%}

/* ═══ SHOP SKIN: DEFAULT/CLASSIC ═══ */
.shop-default .shop-face{border-radius:20%;background:radial-gradient(ellipse 45% 35% at 28% 22%,rgba(255,255,255,0.2),transparent 55%),linear-gradient(145deg,#fffdf8 0%,#f8eed8 40%,#eedcc0 100%);border:1px solid rgba(180,160,130,0.5);box-shadow:inset 0 2px 3px rgba(255,255,255,0.5),inset 0 -2px 4px rgba(0,0,0,0.08),0 6px 20px rgba(0,0,0,0.3)}
.shop-default .shop-face::before{content:'';position:absolute;top:-5%;left:-10%;width:60%;height:50%;background:linear-gradient(125deg,rgba(255,255,255,0.4) 0%,transparent 45%);border-radius:20%;z-index:5}
.shop-default .sd.on{background:radial-gradient(circle at 38% 32%,#8b2020,#3a0808);box-shadow:inset 0 1px 1px rgba(255,255,255,0.15)}
@keyframes sparkPulse{0%,100%{opacity:0.15;transform:scale(0.5)}35%{opacity:1;transform:scale(1.3)}65%{opacity:0.35;transform:scale(0.85)}}

/* ═══ LANDSCAPE FIX — mobile phones only ═══ */
@media (orientation:landscape) and (max-height:500px) {
  body.in-game .game-container{
    padding:0!important;gap:0!important;
  }
  body.in-game .gm-board-area{
    max-height:100dvh!important;height:100dvh!important;padding:0!important;overflow:visible!important;
  }
  body.in-game .board-container{
    max-height:100%!important;height:100%!important;
  }
  body.portrait-mode.in-game .gm-board-area{
    max-height:100dvh!important;height:100dvh!important;
  }
  body.portrait-mode.in-game .board-container{
    max-height:100%!important;height:100%!important;
  }
  body.pt-rearranged.in-game .gm-board-area{
    max-height:100dvh!important;height:100dvh!important;
  }
  body.pt-rearranged.in-game .board-container{
    max-height:100%!important;height:100%!important;
  }
}