Add pets for tiers 1-3.
This commit is contained in:
Greyson Parrelli
+239
-24
@@ -436,30 +436,69 @@ h3 {
|
||||
}
|
||||
|
||||
.card-art {
|
||||
font-size: 3rem;
|
||||
line-height: 1.25;
|
||||
font-size: 2.4rem;
|
||||
line-height: 1.2;
|
||||
filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.card-lg .card-art {
|
||||
font-size: 3.6rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.card-sm .card-art {
|
||||
font-size: 2.2rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.85rem;
|
||||
margin-top: auto;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.card-effect {
|
||||
font-size: 0.56rem;
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
color: rgba(51, 35, 15, 0.75);
|
||||
text-align: center;
|
||||
padding: 0 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-lg .card-effect {
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.card-sm .card-effect {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin-top: 2px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.suit-dot {
|
||||
display: inline-block;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(0, 0, 0, 0.35);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.suit-red {
|
||||
background: #e2483d;
|
||||
}
|
||||
|
||||
.suit-blue {
|
||||
background: #3d7de2;
|
||||
}
|
||||
|
||||
.suit-yellow {
|
||||
background: #f4c430;
|
||||
}
|
||||
|
||||
.card-power {
|
||||
@@ -490,17 +529,14 @@ h3 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.card-food-text {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: #7a2e1e;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.card-food {
|
||||
background: linear-gradient(180deg, #ffe9e0, #ffd4c2);
|
||||
}
|
||||
|
||||
.card-food .card-effect {
|
||||
color: #7a2e1e;
|
||||
}
|
||||
|
||||
.card-check {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
@@ -708,26 +744,123 @@ h3 {
|
||||
}
|
||||
|
||||
.battle-center {
|
||||
position: relative;
|
||||
font-size: 1.6rem;
|
||||
opacity: 0.5;
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 2rem;
|
||||
}
|
||||
|
||||
.battle-center-bolt {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.battle-side {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Front units meet in the middle: left side is reversed so index 0 sits
|
||||
next to the center. */
|
||||
.battle-side-left {
|
||||
flex-direction: row-reverse;
|
||||
/* --- deck stacks --- */
|
||||
|
||||
.stackpile {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.battle-side-right {
|
||||
flex-direction: row;
|
||||
.card-back {
|
||||
width: 84px;
|
||||
height: 116px;
|
||||
border-radius: var(--card-radius);
|
||||
border: 3px solid var(--cocoa);
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
#b3552b 0 10px,
|
||||
#a34a22 10px 20px
|
||||
);
|
||||
box-shadow:
|
||||
2px 2px 0 rgba(0, 0, 0, 0.25),
|
||||
4px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.card-back-count {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.3rem;
|
||||
color: var(--cream);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.stack-empty {
|
||||
width: 84px;
|
||||
height: 116px;
|
||||
}
|
||||
|
||||
@keyframes summon-pop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(18px) scale(0.6);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: translateY(-14px) scale(1.05);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: translateY(-10px) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(0) scale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.summon-pop {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
margin-left: -42px;
|
||||
z-index: 6;
|
||||
animation: summon-pop 1000ms ease forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- foods waiting for a pet --- */
|
||||
|
||||
.pending-foods {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
font-size: 1.3rem;
|
||||
min-width: 1.5rem;
|
||||
}
|
||||
|
||||
.unit-foods {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
font-size: 1rem;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* --- the pet in play --- */
|
||||
|
||||
.battle-unit-zone {
|
||||
min-width: 100px;
|
||||
min-height: 150px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.battle-unit {
|
||||
@@ -740,8 +873,90 @@ h3 {
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.battle-unit.is-front .card {
|
||||
outline: 3px solid rgba(255, 207, 92, 0.6);
|
||||
@keyframes unit-reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: rotateY(90deg) scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: rotateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.battle-unit.unit-reveal {
|
||||
animation: unit-reveal 500ms ease;
|
||||
}
|
||||
|
||||
@keyframes rock-fly-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-70px) translateY(-10px) rotate(0);
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(70px) translateY(4px) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rock-fly-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(70px) translateY(-10px) rotate(0);
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(-70px) translateY(4px) rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rock-fly {
|
||||
position: absolute;
|
||||
font-size: 1.4rem;
|
||||
z-index: 7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rock-fly-right {
|
||||
animation: rock-fly-right 700ms ease-in forwards;
|
||||
}
|
||||
|
||||
.rock-fly-left {
|
||||
animation: rock-fly-left 700ms ease-in forwards;
|
||||
}
|
||||
|
||||
@keyframes eat-pop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 6px) scale(0.6);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -14px) scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -34px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.eat-pop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
color: #7be495;
|
||||
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
|
||||
animation: eat-pop 1000ms ease forwards;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@keyframes clash-left {
|
||||
|
||||
Reference in New Issue
Block a user