/* One face layout for every ordinary playing card. The game decides its size;
   the face scales with that card, independent of buttons, hand or table fonts.
   Keep this stylesheet after game and cosmetic styles. UNO has its own face. */
:is(.playing-card,.solo-card):not(.uno-card):not(.solo-back){
 container-type:inline-size;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 text-align:center;
}
:is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>:is(.card-corner,.solo-card-corner){
 position:absolute;
 inset:5% auto auto 8%;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:0;
 width:auto;
 margin:0;
 padding:0;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 font-size:14px;
 font-weight:750;
 font-style:normal;
 line-height:1.05;
 letter-spacing:0;
 text-align:center;
 transform:none;
}
:is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>:is(.card-corner,.solo-card-corner).bottom{
 inset:auto 8% 5% auto;
 display:flex;
 transform:rotate(180deg);
}
:is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>:is(.card-corner,.solo-card-corner)>:is(small,i){
 display:block;
 margin:0;
 padding:0;
 font-family:Georgia,"Times New Roman",serif;
 font-size:12px;
 font-weight:400;
 font-style:normal;
 line-height:1.05;
}
:is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>.solo-card-corner>b{
 font:inherit;
}
:is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>:is(.card-pip,.solo-card-suit){
 position:absolute;
 inset:0;
 display:grid;
 place-items:center;
 place-content:normal;
 margin:0;
 padding:0;
 font-family:Georgia,"Times New Roman",serif;
 font-size:28px;
 font-weight:400;
 font-style:normal;
 line-height:1;
 letter-spacing:0;
 pointer-events:none;
}
:is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>.card-corner.joker-word{
 inset:6% auto auto 8%;
 font-size:6px;
 font-weight:750;
 letter-spacing:.06em;
 line-height:1;
}
:is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>.joker-symbol{
 width:48%;
 height:auto;
 max-height:56%;
 flex:none;
}
:is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>.joker-as{
 inset:auto auto 5% 8%;
 gap:0;
 font-size:13px;
 line-height:1;
}
/* The same badge fits a full deck, a solitaire column and a small fish card. */
:is(.card-back,.solo-back):not(.uno-stock){container-type:inline-size}
:is(.card-back,.solo-back):not(.uno-stock)>span{
 display:grid;
 place-items:center;
 width:48%;
 height:38%;
 margin:0;
 padding:0;
 border:1px solid var(--cosmetic-card-metal,#d8f36a);
 border-radius:10px;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 font-size:22px;
 font-weight:750;
 line-height:1;
}
@supports(font-size:1cqi){
 :is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>:is(.card-corner,.solo-card-corner){font-size:22cqi}
 :is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>:is(.card-corner,.solo-card-corner)>:is(small,i){font-size:19cqi}
 :is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>:is(.card-pip,.solo-card-suit){font-size:44cqi}
 :is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>.card-corner.joker-word{font-size:9cqi}
 :is(.playing-card,.solo-card):not(.uno-card):not(.solo-back)>.joker-as{font-size:20cqi}
 :is(.card-back,.solo-back):not(.uno-stock)>span{width:48cqi;height:56cqi;border-radius:14cqi;font-size:32cqi}
}