.bottom-nav{
bottom:0!important;
height:calc(60px + env(safe-area-inset-bottom))!important;
padding:0 max(10px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(10px,env(safe-area-inset-right))!important;
box-sizing:border-box!important;
align-items:end!important;
background:transparent!important;
border-top:0!important;
box-shadow:none!important;
overflow:visible!important;
}
.bottom-nav button{
height:60px!important;
align-self:end!important;
padding:0!important;
margin:0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:0!important;
color:#6ea1a8!important;
background:transparent!important;
background-color:transparent!important;
background-image:none!important;
box-shadow:none!important;
appearance:none!important;
-webkit-appearance:none!important;
-webkit-tap-highlight-color:transparent!important;
}
.bottom-nav button svg{
display:block!important;
flex:0 0 auto!important;
margin:0!important;
padding:0!important;
stroke:currentColor!important;
}
.bottom-nav button small{
display:block!important;
height:12px!important;
line-height:12px!important;
margin:0!important;
padding:0!important;
color:currentColor!important;
}
.bottom-nav button.active{
color:#6ea1a8!important;
background:transparent!important;
background-color:transparent!important;
background-image:none!important;
box-shadow:none!important;
}
.bottom-nav button.active svg{stroke:currentColor!important}
.bottom-nav button.active small{color:currentColor!important}

/* Home hero actions: 83% width, Play Online aligned with stripe top, increased separation. */
.landing-art .hero-action{
position:absolute!important;
left:50%!important;
right:auto!important;
width:83%!important;
margin:0!important;
box-sizing:border-box!important;
transform:translateX(-50%)!important;
}
.landing-art .hero-action:first-of-type{
top:68%!important;
}
.landing-art .hero-action:nth-of-type(2){
top:calc(68% + 72px)!important;
}

/* Header controls: exact 35x35 rounded-square buttons with zero padding and true centering. */
.page-header .back-btn,
.game-header .back-btn,
.modal-card .back-small,
.page-header .icon-btn,
.game-header .icon-btn{
width:35px!important;
height:35px!important;
min-width:35px!important;
max-width:35px!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:8px!important;
box-sizing:border-box!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
line-height:35px!important;
text-align:center!important;
box-shadow:0 2px 6px #00000012!important;
overflow:hidden!important;
}

/* Back control: replace the text-glyph positioning entirely with a centered SVG chevron. */
.page-header .back-btn,
.game-header .back-btn,
.modal-card .back-small{
font-size:0!important;
line-height:0!important;
color:transparent!important;
position:relative!important;
top:0!important;
text-indent:0!important;
background-repeat:no-repeat!important;
background-position:center center!important;
background-size:26px 26px!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")!important;
}
.page-header .back-btn,
.game-header .back-btn{
background-color:#fff!important;
}
.modal-card .back-small{
background-color:#e9eef0!important;
box-shadow:none!important;
}

/* Speaker button: same 35x35 shape; current emoji glyph is displayed at 24px. */
.page-header .icon-btn,
.game-header .icon-btn{
font-size:24px!important;
font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
}