main { background-color: darkolivegreen; } /* MAP */ #mapwrap { width: 1000px; height: 850px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2666666667); } #map { background-repeat: no-repeat; background-size: 100% 100%; width: 1000px; height: 850px; overflow: clip; } #map { background-image: url(images/map75.png); } @media (min-resolution: 97dpi) { #map { background-image: url(images/map100.png); } } #hand { display: flex; flex-direction: row; gap: 8px; margin-top: 16px; padding: 16px; justify-content: center; } .front { position: absolute; box-sizing: border-box; width: 93px; height: 102px; display: flex; flex-direction: column; align-items: center; padding: 4px; } .front .value { font-weight: bold; font-size: 30px; margin-top: auto; } .front[data-front-id=m] { width: 104px; height: 114px; } .card { background-size: 100% 100%; width: 198px; height: 270px; border-radius: 5px; box-shadow: 0 0 0 1px #333; } .card[data-card-id="1"] { background-image: url("images/cards100/card_1.png"); } .card[data-card-id="2"] { background-image: url("images/cards100/card_2.png"); } .card[data-card-id="3"] { background-image: url("images/cards100/card_3.png"); } .card[data-card-id="4"] { background-image: url("images/cards100/card_4.png"); } .card[data-card-id="5"] { background-image: url("images/cards100/card_5.png"); } .card[data-card-id="6"] { background-image: url("images/cards100/card_6.png"); } .card[data-card-id="7"] { background-image: url("images/cards100/card_7.png"); } .card[data-card-id="8"] { background-image: url("images/cards100/card_8.png"); } .card[data-card-id="9"] { background-image: url("images/cards100/card_9.png"); } .card[data-card-id="10"] { background-image: url("images/cards100/card_10.png"); } .card[data-card-id="11"] { background-image: url("images/cards100/card_11.png"); } .card[data-card-id="12"] { background-image: url("images/cards100/card_12.png"); } .card[data-card-id="13"] { background-image: url("images/cards100/card_13.png"); } .card[data-card-id="14"] { background-image: url("images/cards100/card_14.png"); } .card[data-card-id="15"] { background-image: url("images/cards100/card_15.png"); } .card[data-card-id="16"] { background-image: url("images/cards100/card_16.png"); } .card[data-card-id="17"] { background-image: url("images/cards100/card_17.png"); } .card[data-card-id="18"] { background-image: url("images/cards100/card_18.png"); } .card[data-card-id="19"] { background-image: url("images/cards100/card_19.png"); } .card[data-card-id="20"] { background-image: url("images/cards100/card_20.png"); } .card[data-card-id="21"] { background-image: url("images/cards100/card_21.png"); } .card[data-card-id="22"] { background-image: url("images/cards100/card_22.png"); } .card[data-card-id="23"] { background-image: url("images/cards100/card_23.png"); } .card[data-card-id="24"] { background-image: url("images/cards100/card_24.png"); } .card[data-card-id="25"] { background-image: url("images/cards100/card_25.png"); } .card[data-card-id="26"] { background-image: url("images/cards100/card_26.png"); } .card[data-card-id="27"] { background-image: url("images/cards100/card_27.png"); } .card[data-card-id="28"] { background-image: url("images/cards100/card_28.png"); } .card[data-card-id="29"] { background-image: url("images/cards100/card_29.png"); } .card[data-card-id="30"] { background-image: url("images/cards100/card_30.png"); } .card[data-card-id="31"] { background-image: url("images/cards100/card_31.png"); } .card[data-card-id="32"] { background-image: url("images/cards100/card_32.png"); } .card[data-card-id="33"] { background-image: url("images/cards100/card_33.png"); } .card[data-card-id="34"] { background-image: url("images/cards100/card_34.png"); } .card[data-card-id="35"] { background-image: url("images/cards100/card_35.png"); } .card[data-card-id="36"] { background-image: url("images/cards100/card_36.png"); } .card[data-card-id="37"] { background-image: url("images/cards100/card_37.png"); } .card[data-card-id="38"] { background-image: url("images/cards100/card_38.png"); } .card[data-card-id="39"] { background-image: url("images/cards100/card_39.png"); } .card[data-card-id="40"] { background-image: url("images/cards100/card_40.png"); } .card[data-card-id="41"] { background-image: url("images/cards100/card_41.png"); } .card[data-card-id="42"] { background-image: url("images/cards100/card_42.png"); } .card[data-card-id="43"] { background-image: url("images/cards100/card_43.png"); } .card[data-card-id="44"] { background-image: url("images/cards100/card_44.png"); } .card[data-card-id="45"] { background-image: url("images/cards100/card_45.png"); } .card[data-card-id="46"] { background-image: url("images/cards100/card_46.png"); } .card[data-card-id="47"] { background-image: url("images/cards100/card_47.png"); } .card[data-card-id="48"] { background-image: url("images/cards100/card_48.png"); } .card[data-card-id="49"] { background-image: url("images/cards100/card_49.png"); } .card[data-card-id="50"] { background-image: url("images/cards100/card_50.png"); } .card[data-card-id="51"] { background-image: url("images/cards100/card_51.png"); } .card[data-card-id="52"] { background-image: url("images/cards100/card_52.png"); } .card[data-card-id="53"] { background-image: url("images/cards100/card_53.png"); } .card[data-card-id="54"] { background-image: url("images/cards100/card_54.png"); } .card[data-card-id="55"] { background-image: url("images/cards100/card_55.png"); } .card[data-card-id="56"] { background-image: url("images/cards100/card_56.png"); } .card[data-card-id="57"] { background-image: url("images/cards100/card_57.png"); } .card[data-card-id="58"] { background-image: url("images/cards100/card_58.png"); } .card[data-card-id="59"] { background-image: url("images/cards100/card_59.png"); } .card[data-card-id="60"] { background-image: url("images/cards100/card_60.png"); } .card[data-card-id="61"] { background-image: url("images/cards100/card_61.png"); } .card[data-card-id="62"] { background-image: url("images/cards100/card_62.png"); } .card.event { position: absolute; width: 132px; height: 180px; } .standee { box-sizing: border-box; position: absolute; width: 29px; height: 35px; background-size: cover; background-repeat: no-repeat; border-radius: 4px; box-shadow: 0 0 0 1px #333; } .standee[data-standee-id="0"] { background-image: url("images/standees/standee_0.png"); } .standee[data-standee-id="1"] { background-image: url("images/standees/standee_1.png"); } .standee[data-standee-id="2"] { background-image: url("images/standees/standee_2.png"); } .standee[data-standee-id="3"] { background-image: url("images/standees/standee_3.png"); } .standee[data-standee-id="4"] { background-image: url("images/standees/standee_4.png"); }