.card { position: relative; font-family: "Source Serif"; font-size: 14px; line-height: 18px; width: 240px; height: 336px; background-color: #ca8; color: black; border: 1px solid black; border-radius: 8px; box-shadow: 1px 2px 8px #0008; } .card.scenario { background-color: #eecba1; } .card { user-select: none; } /* FORMATION CARD */ .name { border-top: 1px solid black; border-bottom: 1px solid black; margin: 10px 0 12px 0; padding: 5px 20px 5px 0; text-align: center; font-size: 16px; line-height: 16px; } .flip .name { padding: 5px 0 5px 20px; } .name.with_symbol { padding: 5px 0; } .name.red { background-color: #e32223; color: white; } .name.pink { background-color: #f49899; color: black; } .name.blue { background-color: #2482e4; color: white; } .name.dkblue { background-color: #44d; color: white; } .name.sym { padding-left: 30px; } .link { position: absolute; width: 32px; height: 16px; top: 55px; background-size: contain; } .link.left { background-image: url(images/link_left.svg); left: 0px; } .link.right { background-image: url(images/link_right.svg); right: 0px; } .symbol { position: absolute; top: 0px; left: 1px; width: 45px; height: 63px; background-size: contain; z-index: 1; filter: drop-shadow( 0 0 2px linen ); } .flip .symbol { top: -4px; } .blue + .infantry { background-image: url(images/infantry1.png); } .blue + .cavalry { background-image: url(images/cavalry1.png); } .dkblue + .infantry { background-image: url(images/infantry1.png); } .dkblue + .cavalry { background-image: url(images/cavalry1.png); } .pink + .infantry { background-image: url(images/infantry2.png); } .pink + .cavalry { background-image: url(images/cavalry2.png); } .red + .infantry { background-image: url(images/infantry2.png); } .red + .cavalry { background-image: url(images/cavalry2.png); } .strength { position: absolute; top: 4px; right: 4px; background-color: #dadada; color: black; border: 2px solid black; border-width: 4px 1px; border-radius: 50%; min-width: 18px; padding: 0 2px; height: 32px; line-height: 32px; font-size: 18px; text-align: center; } .dice_area { position: relative; font-size: 24px; line-height: 24px; text-align: center; margin: 12px 0; } .dice_area::before { content: " ~ " } .dice_area::after { content: " ~ " } .star { position: absolute; right: 0px; top: 51px; font-size: 24px; line-height: 24px; text-align: left; padding: 0 12px; } .link.right + .star { right: 24px; } .action_row { font-style: italic; display: grid; margin: 12px 0; padding: 0 8px; grid-template-columns: 1fr 1fr; gap: 4px; } .action_row > div { border: 1px solid black; padding: 2px 4px; } .action_target:empty { visibility: hidden; } .action_effect:empty { visibility: hidden; } .action_type { background-color: #e0855d; min-height: 18px; } .action_type.reaction { background-color: #d06aa1; } .action_requirement { background-color: #daad5d; text-align: center; } .action_target { grid-column: 1 / 3; background-color: #daad5d; min-height: 18px; text-align: center; } .action_effect { grid-column: 1 / 3; background-color: #e3d3c3; min-height: 36px; } .action_effect:empty { min-height: 18px; } .lore_text, .rule_text { font-family: "Source Serif SmText"; margin: 6px 0; padding: 0 12px; font-size: 11px; line-height: 13px; text-indent: 12px; } .lore_text { font-style: italic; } .lore_text p, .rule_text p { margin: 6px 0; } .reserve { position: absolute; font-size: 12px; line-height: 12px; bottom: 0px; left: 0px; padding: 7px 0; width: 240px; text-align: center; } .retire { position: absolute; font-size: 12px; line-height: 12px; bottom: 6px; left: 60px; padding: 2px 0; width: 120px; text-align: center; border-radius: 7px; } .number { position: absolute; font-size: 10px; line-height: 12px; bottom: 0px; right: 0px; padding: 6px 8px; } .extra { display: none; position: absolute; font-size: 10px; line-height: 12px; bottom: 0px; left: 0px; padding: 6px 8px; } /* SCENARIO CARD */ .scenario_title, .scenario_player { background-color: #f5e0c5; border-top: 1px solid black; border-bottom: 1px solid black; } .battle_name { font-size: 16px; line-height: 20px; } .battle_date { font-size: 10px; line-height: 14px; } .scenario_title { margin: 12px 0; padding: 4px 0; text-align: center; } .scenario_player { margin: 6px 0; padding: 4px 8px; } .battle_name, .scenario_player_name { font-variant: small-caps; } .scenario_line { padding-left: 24px; } /* SQUEEZE CARDS WITH TOO MUCH INFO */ .squeeze1 .action_effect { min-height: 18px; } .squeeze2 .action_row { margin: 12px 0 0 0 } .squeeze3 .action_effect { min-height: 18px; } .squeeze3 .action_row { margin: 6px 0 0 0 } /* PRINT STYLE */ @media print { html,body{margin:0;padding:0!important;background-image:none!important;background-color:white!important;} h1,h2{display:none} .card{break-inside:avoid} .list{margin:4px;gap:4px!important;} .card{box-shadow:none!important;border-radius:0!important;} .card,.scenario_title,.scenario_player,.strength,.action_row *{background-color:white!important} .number,.extra{display:block;} .extra{display:block} }