/* Black translucent scanlines give exactly the same colour with normal alpha
   composition. Multiply unnecessarily made Safari blend the entire screen. */
.crt-overlay {contain:strict;transform:translateZ(0);}
.crt-overlay::before {mix-blend-mode:normal!important;}
/* The rail responds to its own space, including when chat is open. */
#playerRail {container-type:inline-size;}
@container(min-width:1150px){
 #screen-game #playerRail :is(.pchip,.pchip.is-me) {grid-template-columns:44px minmax(48px,1fr) auto!important;height:90px!important;min-height:90px!important;gap:7px!important;}
 #screen-game #playerRail :is(.pchip,.pchip.is-me).has-turn-hud {grid-template-columns:44px minmax(48px,1fr) auto 28px!important;}
 #screen-game #playerRail :is(.pchip,.pchip.is-me) .pchip-av {width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;}
 #screen-game #playerRail .pchip .pchip-card-count {font-size:15px!important;color:var(--cream);font-weight:700;}
 #screen-game #playerRail .opponent-card-stack>b {font-size:16px;}
 #screen-game #playerRail .opponent-back,#screen-game #playerRail .opponent-card-stack {width:27px!important;height:39px!important;flex-basis:27px!important;}
}
@container(min-width:1300px){
 #screen-game #playerRail :is(.pchip,.pchip.is-me) {grid-template-columns:50px minmax(48px,1fr) auto!important;}
 #screen-game #playerRail :is(.pchip,.pchip.is-me).has-turn-hud {grid-template-columns:50px minmax(48px,1fr) auto 28px!important;}
 #screen-game #playerRail :is(.pchip,.pchip.is-me) .pchip-av {width:50px!important;height:50px!important;min-width:50px!important;max-width:50px!important;}
 #screen-game #playerRail .opponent-back,#screen-game #playerRail .opponent-card-stack {width:33px!important;height:47px!important;flex-basis:33px!important;}
}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px){
 #screen-game #playerRail :is(.pchip,.pchip.is-me) {grid-template-columns:36px minmax(0,1fr) 32px!important;grid-template-rows:38px 42px!important;height:98px!important;min-height:98px!important;}
 #screen-game #playerRail :is(.pchip,.pchip.is-me)>.pchip-av {width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important;}
 #screen-game #playerRail .tablet-hand-caption>strong {font-size:21px;}
 #screen-game #playerRail .opponent-card-stack>b {font-size:14px;}
}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px) and (orientation:landscape){
 #screen-game #playerRail :is(.pchip,.pchip.is-me) {height:92px!important;min-height:92px!important;grid-template-rows:38px 34px!important;}
 body:not([data-game="kounga"]) #screen-game .game-main {grid-template-rows:92px 36px minmax(0,1fr) auto auto!important;}
}
@media(max-width:760px) and (min-height:560px){
 #screen-game #playerRail :is(.pchip,.pchip.is-me)>.pchip-av {width:26px!important;height:26px!important;min-width:26px!important;max-width:26px!important;}
 #screen-game #playerRail .pchip .pchip-card-count {font-size:11px!important;font-weight:700;}
 #screen-game #playerRail .opponent-card-stack>b {font-size:14px;}
}
#modal-profile .profile-avatar-picker {grid-template-columns:repeat(10,minmax(0,1fr));}
@media(max-width:690px){#modal-profile .profile-avatar-picker {grid-template-columns:repeat(5,minmax(0,1fr));}}

body[data-table-palette="forest"] {--felt-art:url('../assets/art/felt-forest-enchanted-v60.webp');}
@media(max-width:760px){body[data-table-palette="forest"] {--felt-art:url('../assets/art/felt-forest-enchanted-portrait-v60.webp');}}
@media(max-width:760px) and (min-height:560px){
 #screen-game #playerRail :is(.pchip,.pchip.is-me) {grid-template-columns:26px minmax(0,1fr) 21px!important;}
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me {grid-template-columns:26px minmax(0,1fr) 30px!important;}
}

.pchip-card-count {display:inline-flex;align-items:baseline;gap:3px;}
.pchip-card-count>strong {font:700 14px/1 var(--ui-display);color:var(--cream);}
.pchip-card-count>small {font:500 10px/1 var(--ui-display);color:var(--chrome-muted);}
@container(min-width:1150px){.pchip-card-count>strong{font-size:18px;}.pchip-card-count>small{font-size:11px;}}
@container(min-width:1300px){.pchip-card-count>strong{font-size:20px;}}
@media(max-width:760px){.pchip-card-count>strong{font-size:13px;}.pchip-card-count>small{font-size:9px;}}

@media(max-aspect-ratio:1/1){body[data-table-palette="forest"] {--felt-art:url('../assets/art/felt-forest-enchanted-portrait-v60.webp');}}