bullet holes in card borders and less tidy equipments

frontend/src/components/Card.vue

@@ -89,6 +89,19 @@ export default {
 		#816b45 10px
 	);
 }
+.card:not(.back,.fistful-of-cards,.high-noon,.gold-rush):before{
+	content: "";
+	background-image: radial-gradient(var(--bg-color) 13%, #0000 5%),
+				radial-gradient(var(--bg-color) 14%, transparent 5%),
+				radial-gradient(var(--bg-color) 8%, transparent 5%);
+	background-position: -12px 0, 12px 14px, 0 -12pt;
+	background-size: 50px 50px;
+	position: absolute;
+	top: -10px;
+	left: -10px;
+	bottom: -4px;
+	right: -4px;
+}
 .card.equipment {
 	box-shadow: 
 		0 0 0 3pt #5c5e83,

frontend/src/components/Lobby.vue

@@ -61,7 +61,7 @@
 						<div class="tiny-equipment">
 							<Card v-for="(card, i) in p.equipment" v-bind:key="card.name+card.number"
 										:card="card" @click.native="selectedInfo = p.equipment"
-										:style="`margin-top: ${i<1?10:-(Math.min((p.equipment.length+p.gold_rush_equipment.length+1)*12,80))}pt`"/>
+										:style="`margin-top: ${i < 1 ? 10 : -(Math.min((p.equipment.length + p.gold_rush_equipment.length + 1) * 12, 80))}pt;`"/>
 							<Card v-for="(card, i) in p.gold_rush_equipment" v-bind:key="card.name+card.number"
 										:card="card" @click.native="selectedInfo = p.gold_rush_equipment"
 										:style="`margin-top: ${i+p.equipment.length<1?10:-(Math.min((p.equipment.length+p.gold_rush_equipment.length+1)*12,80))}pt`"/>
@@ -531,8 +531,14 @@ export default {
 	transform: scale(0.8);
 	margin-bottom: -4pt;
 }
+.tiny-equipment .card {
+	transform: rotate(2deg);
+}
+.tiny-equipment .card:nth-child(odd) {
+	transform: rotate(-2deg);
+}
 .tiny-equipment .card:hover {
-	transform: translateY(10px) scale(1.1);
+	transform: translateY(10px) scale(1.2);
 	z-index: 1;
 }
 .tiny-character {

frontend/src/components/Player.vue

@@ -3,13 +3,13 @@
 		<p v-if="instruction && (lives > 0 || is_ghost)" class="center-stuff">{{instruction}}</p>
 		<!-- <button v-if="canEndTurn" @click="end_turn">Termina Turno</button> -->
 		<div class="equipment-slot">
-			<Card v-if="my_role" :card="my_role" class="back"
+			<Card v-if="my_role" :card="my_role" class="back" style="transform:rotate(-2deg)"
 					@pointerenter.native="desc=($i18n.locale=='it'?my_role.goal:my_role.goal_eng)" @pointerleave.native="desc=''"/>
 			<Card v-if="character" :card="character" style="margin-left: -30pt;margin-right: 0pt;"
 					@pointerenter.native="setDesc(character)" @pointerleave.native="desc=''"/>
 			<transition-group name="list" tag="div" style="display: flex;flex-direction:column; justify-content: space-evenly; margin-left: 12pt;margin-right:-10pt;">
-				<span v-for="(n, i) in lives" v-bind:key="i" :alt="i">❤️</span>
 				<span v-for="(n, i) in (max_lives-lives)" v-bind:key="`${i}-sk`" :alt="i">💀</span>
+				<span v-for="(n, i) in lives" v-bind:key="i" :alt="i">❤️</span>
 			</transition-group>
 			<div v-if="gold_nuggets > 0" style="display: flex;align-items: center;margin-left: 12pt;margin-right: -10pt;justify-content: space-evenly;width: 25pt;">
 				<transition name="list">
@@ -17,7 +17,7 @@
 				</transition>
 				<span>💵️</span>
 			</div>
-			<transition-group v-if="lives > 0 || is_ghost" name="list" tag="div" style="margin: 0 0 0 10pt; display:flex;">
+			<transition-group v-if="lives > 0 || is_ghost" name="list" id="equipment" tag="div" style="margin: 0 0 0 10pt; display:flex;">
 				<Card v-for="card in equipmentComputed" v-bind:key="card.name+card.number" :card="card" 
 					@pointerenter.native="setDesc(card)" @pointerleave.native="desc=''"
 					@click.native="play_card(card, true)" :class="{'cant-play':((eventCard && eventCard.name == 'Lazo') || (!card.can_be_used_now && !card.is_equipment))}"/>
@@ -514,8 +514,12 @@ export default {
 	margin-left: -30pt;
 }
 .hand>.card:hover {
-	margin-right:35pt;
+	transform: translateY(-15px) translateX(-15px) rotate(-2deg);
-	transform: translateY(-15px);
+	z-index: 1;
+}
+.hand>.card:nth-child(1):hover, .hand>.card:last-child:hover {
+	transform: translateY(-15px) translateX(0) rotate(2deg);
+	z-index: 1;
 }
 #hand_text{
 	color: var(--muted-color);
@@ -531,6 +535,12 @@ export default {
 	margin: 10pt 0pt;
 	overflow:auto;
 }
+#equipment .card:nth-child(even) {
+	transform: rotate(1deg);
+}
+#equipment .card:nth-child(odd) {
+	transform: rotate(-1deg);
+}
 .hurt-notify {
 	pointer-events: none;
 	animation: disappear 0.5s ease-in forwards;