/* Conventional reading corners, with artwork cleared behind them. */
.card .cf-rank,.special-rank {text-shadow:var(--deck-index-shadow);}
.card .cf-suit {text-shadow:var(--deck-suit-shadow);}
.cardface[data-joker="true"] .cf-rank {text-shadow:0 1px 1px #20172835!important;}
.cf-joker-portrait {position:absolute;left:10%;top:20%;width:80%;aspect-ratio:1;background:var(--joker-art) center/contain no-repeat;image-rendering:pixelated;}
.cardface[data-joker="true"] .cf-joker-word {bottom:12%;font-size:12cqw;line-height:1;font-weight:900;padding:2% 5%;border-radius:3px;background:#fff0b8;color:#33243a!important;}
.cardface[data-art-state="error"] .cf-joker-portrait {display:none;}
.cardface[data-art-state="error"] .cf-joker-word {bottom:42%;}

/* Image elements keep their portrait proportions independently of tile size. */
.progress-reward-icon.deck {background:transparent!important;border:0!important;box-shadow:none!important;}
.progress-reward-icon.deck>img.reward-deck-back {display:block!important;position:static!important;width:auto!important;height:100%!important;max-width:100%!important;max-height:100%!important;aspect-ratio:5/7;object-fit:contain!important;flex:0 0 auto!important;margin:auto!important;background:none!important;border:0;border-radius:3px;image-rendering:pixelated;}
.progress-node-rewards>.progress-reward-icon.deck,.founder-next-preview>.progress-reward-icon.deck {width:46px!important;height:64px!important;min-height:64px!important;flex:0 0 46px!important;padding:2px!important;}
#progressLocker .progress-locker-item>.progress-reward-icon.deck {width:100%!important;height:108px!important;min-height:108px!important;flex:0 0 108px!important;padding:4px!important;}
#progressCollection .progress-collection-preview>.progress-reward-icon.deck {height:72px!important;min-height:0!important;padding:2px!important;}
.cosmetic-preview-rail-item>.progress-reward-icon.deck {width:44px!important;height:62px!important;min-height:0!important;flex:0 0 auto!important;padding:2px!important;}
.progress-reward-icon[data-art-state="loading"]>img {visibility:hidden;}
.progress-reward-icon.deck[data-art-state="loading"]::after {content:'···';font:700 18px/1 var(--ui-display);color:var(--chrome-muted);}

/* The appearance preview touches the scroll viewport's top edge. */
#modal-settings .settings-pane-v12[data-settings-pane="style"] {padding-top:0!important;scroll-padding-top:170px;}
#settingsStylePreview {position:sticky;top:0;margin-top:0;isolation:isolate;overflow:visible;border:0;border-radius:0;box-shadow:none;background:var(--chrome-raised);}
#settingsStylePreview::before {content:'';position:absolute;inset:0 -24px -9px;background:var(--chrome-raised);z-index:-1;border-bottom:2px solid var(--chrome-border-strong);}
#settingsStylePreview .settings-preview-table {border-radius:0 0 7px 7px!important;}
.practice-situation {align-items:center!important;}
.practice-situation>label {display:flex!important;align-items:center!important;align-self:stretch!important;margin:0!important;padding:0!important;line-height:1!important;font:700 16px/1 var(--ui-display)!important;white-space:nowrap;}
.practice-situation>select {margin:0!important;align-self:center!important;font:700 16px/1.2 var(--ui-display)!important;}
#screen-lobby-host .room-options :is(.setup-label,.toggle-row>span) {text-align:left!important;}
.join-code-actions {grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:13px;padding-bottom:5px;}
.join-code-actions>.btn {min-height:54px!important;height:54px!important;padding:10px 12px!important;margin:0!important;border-width:3px!important;box-shadow:0 5px 0 #100e0c,inset 0 2px 0 #ffffff1f!important;}
.join-code-actions>.btn:active {transform:translateY(3px);box-shadow:0 2px 0 #100e0c,inset 0 1px 0 #ffffff1f!important;}
body.light .join-code-actions>.btn {border-width:3px!important;box-shadow:0 5px 0 #b39874,inset 0 2px 0 #fff4bd!important;}
body.light .join-code-actions>.btn:active {box-shadow:0 2px 0 #b39874,inset 0 1px 0 #fff4bd!important;}

/* Public, face-down hands stay attached to their owner, away from play piles. */
#screen-game #playerRail {display:grid!important;grid-template-columns:repeat(var(--seat-columns,4),minmax(0,1fr))!important;gap:8px!important;padding:3px 1px 5px!important;}
#screen-game #playerRail .pchip {width:100%!important;max-width:none!important;height:113px!important;min-height:113px!important;grid-template-columns:34px minmax(0,1fr)!important;grid-template-rows:39px 54px!important;align-content:center!important;gap:4px 8px!important;padding:6px 9px!important;border-radius:11px!important;}
#screen-game #playerRail .pchip.has-turn-hud {grid-template-columns:34px minmax(0,1fr) 35px!important;padding-right:7px!important;}
#screen-game #playerRail .pchip .pchip-av {grid-row:1!important;width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important;}
#screen-game #playerRail .pchip .pchip-body {grid-row:1!important;gap:3px!important;}
#screen-game #playerRail .pchip .pchip-name {font-size:16px!important;}
#screen-game #playerRail .pchip .pchip-meta {gap:6px!important;min-height:14px;}
#screen-game #playerRail .pchip .pchip-score {height:15px!important;min-height:15px!important;}
#screen-game #playerRail .pchip .pchip-score strong {font-size:13px!important;}
#screen-game #playerRail .pchip .pchip-turn-hud {grid-row:1!important;width:33px!important;max-width:33px!important;height:39px!important;gap:2px!important;}
#screen-game #playerRail .pchip .pchip-timer {width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;min-height:28px!important;max-height:28px!important;flex-basis:28px!important;}
#screen-game #playerRail .pchip .pchip-timer-seconds {font-size:12px!important;}
#screen-game #playerRail .pchip .pchip-missed-dots {gap:3px!important;min-width:25px!important;}
#screen-game #playerRail .pchip .pchip-missed-dots i {width:5px!important;height:5px!important;min-width:5px!important;min-height:5px!important;flex-basis:5px!important;}
#screen-game #playerRail .pchip.is-me>.pchip-av,#screen-game #playerRail .pchip.is-me>.pchip-body,#screen-game #playerRail .pchip.is-me>.pchip-turn-hud {grid-row:1/-1!important;}
#screen-game #playerRail .opponent-hand {grid-column:1/-1;grid-row:2;display:flex;justify-content:center;align-items:center;min-width:0;height:54px;padding:2px 6px;gap:0;isolation:isolate;}
.opponent-back {display:block;position:relative;width:34px;height:48px;flex:0 0 34px;object-fit:contain;image-rendering:pixelated;border-radius:3px;box-shadow:1px 2px 1px #0006;pointer-events:none;}
#screen-game #playerRail .opponent-hand {gap:4px;}
.opponent-card-stack {position:relative;display:block;width:34px;height:48px;flex:0 0 34px;border-radius:3px;box-shadow:2px -2px 0 #a39078,3px -3px 0 #211a28;margin-left:1px;}
.opponent-card-stack>img {display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;border-radius:3px;}
.opponent-card-stack>b {position:absolute;inset:0;display:grid;place-items:center;color:#fff6db;font:800 15px/1 var(--ui-display);text-shadow:0 1px 2px #000;}
.opponent-card-stack>b::before {content:'';position:absolute;inset:30% 3%;border-radius:3px;background:#211925df;z-index:-1;}
.opponent-card-stack>b {isolation:isolate;}
.opponent-empty {color:var(--chrome-muted);font-size:20px;}
#playerRail .pchip .opponent-hand>.pchip-count {display:grid!important;place-items:center!important;flex:0 0 26px!important;height:25px!important;min-height:25px!important;margin:0 0 0 9px!important;padding:0 3px!important;border:1px solid var(--chrome-border-strong)!important;border-radius:5px;background:var(--chrome-well)!important;}
#playerRail .pchip .opponent-hand>.pchip-count strong {font-size:15px!important;color:var(--cream)!important;}
.opponent-hand[data-count="0"] {opacity:.65;}
.opponent-hand {position:relative;}
.opponent-hand[data-art-state="loading"]>:is(.opponent-back,.opponent-card-stack),.opponent-hand[data-art-state="error"]>:is(.opponent-back,.opponent-card-stack) {visibility:hidden;}
.opponent-hand[data-art-state="loading"]::before {content:'···';position:absolute;inset:0;display:grid;place-items:center;color:var(--chrome-muted);}
.opponent-hand[data-art-state="error"]::after {content:attr(data-count);position:absolute;inset:0;display:grid;place-items:center;color:var(--cream);font:700 17px/1 var(--ui-display);}
.profile-deck-badge>span:first-child {flex:0 0 24px;object-fit:contain;}
.profile-deck-badge>img {display:block;width:25px;height:35px;object-fit:contain;image-rendering:pixelated;flex:0 0 25px;border-radius:3px;}
button.profile-deck-badge {margin-top:8px;align-self:flex-start;}
@media(max-width:760px){
 #progressLocker .progress-locker-item>.progress-reward-icon.deck {height:82px!important;min-height:82px!important;flex-basis:82px!important;}
 #progressCollection .progress-collection-preview>.progress-reward-icon.deck {height:48px!important;}
 .progress-node-rewards>.progress-reward-icon.deck,.founder-next-preview>.progress-reward-icon.deck {width:38px!important;height:54px!important;min-height:54px!important;flex-basis:38px!important;}
 #screen-game #playerRail {gap:5px!important;}
 #screen-game #playerRail:not([data-players="2"]) {grid-template-columns:repeat(var(--opponent-columns,3),minmax(0,1fr))!important;}
 #screen-game #playerRail .pchip {height:99px!important;min-height:99px!important;grid-template-columns:24px minmax(0,1fr)!important;grid-template-rows:34px 43px!important;gap:4px!important;padding:5px!important;}
 #screen-game #playerRail .pchip.has-turn-hud {grid-template-columns:24px minmax(0,1fr) 21px!important;}
 #screen-game #playerRail .pchip .pchip-av {width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;}
 #screen-game #playerRail .pchip .pchip-name {font-size:12px!important;}
 #screen-game #playerRail .pchip .pchip-body {gap:2px!important;}
 #screen-game #playerRail .pchip .pchip-score strong {font-size:11px!important;}
 #screen-game #playerRail .pchip .pchip-role {font-size:9px;}
 #screen-game #playerRail .opponent-hand {height:43px;padding:2px 0;justify-content:center;}
 .opponent-back,.opponent-card-stack {width:23px;height:33px;flex-basis:23px;}
 #screen-game #playerRail .opponent-hand {gap:3px;padding-inline:0;}
 .opponent-card-stack>b {font-size:12px;}
 #playerRail .pchip .opponent-hand>.pchip-count {flex-basis:22px!important;min-height:22px!important;height:22px!important;margin-left:5px!important;}
 #playerRail .pchip .opponent-hand>.pchip-count strong {font-size:12px!important;}
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me {grid-column:1/-1;order:2;height:42px!important;min-height:42px!important;grid-template-rows:30px!important;grid-template-columns:26px minmax(0,1fr)!important;}
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me.has-turn-hud {grid-template-columns:26px minmax(0,1fr) 35px!important;}
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me .pchip-body {flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;}
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me .pchip-name {width:auto!important;max-width:75%!important;font-size:13px!important;}
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me .pchip-meta {width:auto!important;flex:0 0 auto!important;}
 #screen-game #playerRail .pchip:not(.is-me) .pchip-turn-hud {grid-column:3!important;grid-row:1!important;width:21px!important;max-width:21px!important;height:34px!important;}
 #screen-game #playerRail .pchip:not(.is-me) .pchip-timer {width:21px!important;height:21px!important;min-width:21px!important;max-width:21px!important;min-height:21px!important;max-height:21px!important;flex-basis:21px!important;}
 #screen-game #playerRail .pchip:not(.is-me) .pchip-timer-seconds {font-size:10px!important;}
 #screen-game #playerRail .pchip .pchip-role {max-width:100%;overflow:hidden;text-overflow:ellipsis;}
 #settingsStylePreview::before {inset-inline:-12px;}
}
@media(max-height:550px) and (min-width:620px){
 #screen-start .title-brand-block {left:3vw!important;top:12px!important;transform:none!important;width:43vw!important;text-align:left;}
 #screen-start .title-card-fan {left:5vw!important;top:105px!important;width:36vw!important;height:auto!important;aspect-ratio:3/2;transform:none!important;}
 #screen-start .title-main-menu {left:auto!important;right:12px!important;top:16px!important;bottom:auto!important;width:45vw!important;max-width:45vw!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;}
 #screen-start .title-main-menu .title-menu-button {grid-column:1!important;height:52px!important;min-height:52px!important;padding:6px 12px 6px 54px!important;font-size:18px!important;}
 #screen-start .title-main-menu .title-menu-button>img {left:9px!important;width:31px!important;height:31px!important;}
 #screen-start .title-main-menu .title-menu-button::before {left:46px!important;}
 #screen-start .title-main-menu .title-menu-button small {font-size:10px!important;}
 #screen-start .title-main-menu .title-resume {position:static!important;width:100%!important;min-height:43px!important;font-size:14px!important;grid-column:1!important;}
 #screen-start .title-profile-plaque {left:12px!important;right:auto!important;bottom:12px!important;width:43vw!important;height:64px!important;min-height:64px!important;padding:5px 8px!important;grid-template-columns:46px minmax(0,1fr)!important;gap:8px!important;}
 #screen-start .title-profile-avatar {width:43px!important;height:43px!important;}
 #screen-start .title-profile-plaque #homeProfileName {font-size:19px!important;}
 #screen-game #playerRail:not([data-players="2"]) {grid-template-columns:repeat(var(--seat-columns,4),minmax(0,1fr))!important;}
 #screen-game #playerRail .pchip,#screen-game #playerRail:not([data-players="2"]) .pchip.is-me {height:83px!important;min-height:83px!important;grid-template-rows:29px 37px!important;grid-column:auto;order:0;}
 #screen-game #playerRail .opponent-hand {height:37px;}
 .opponent-back,.opponent-card-stack {width:25px;height:35px;flex-basis:25px;}
 #screen-game #playerRail:not([data-players="2"]) .pchip.is-me .pchip-body {flex-direction:column!important;align-items:flex-start!important;gap:3px!important;}
}
@media(max-width:360px){
 .opponent-back,.opponent-card-stack {width:19px;height:27px;flex-basis:19px;}
 #screen-game #playerRail .opponent-hand {gap:2px;}
 .opponent-card-stack>b {font-size:10px;}
}