Give phone shop cards description room and un-clip the selection.

The horizontal-scroll trays clip vertical overflow, so a selected card's lift,
gold outline, and check badge were cut off at the top. Add row headroom and
tuck the check badge inside the card corner. Also make the in-tray cards taller
with a larger rule panel and bigger ability text so descriptions aren't cramped
(widths stay tight so all four shop cards still fit without scrolling).
This commit is contained in:
Greyson Parrelli
2026-07-26 21:49:40 -04:00
parent 6e6374e751
commit 53a04b0cea
+29 -9
View File
@@ -2945,14 +2945,14 @@ h3 {
/* --- cards: printed small --- */ /* --- cards: printed small --- */
.card { .card {
width: 78px; width: 80px;
height: 108px; height: 126px;
padding: 4px; padding: 4px;
gap: 3px; gap: 3px;
} }
.card-lg { .card-lg {
width: 82px; width: 80px;
height: 114px; height: 132px;
} }
.card-sm { .card-sm {
width: 60px; width: 60px;
@@ -2975,10 +2975,10 @@ h3 {
font-size: 0.66rem; font-size: 0.66rem;
} }
.card-effect { .card-effect {
font-size: 0.48rem; font-size: 0.55rem;
} }
.card-lg .card-effect { .card-lg .card-effect {
font-size: 0.5rem; font-size: 0.57rem;
} }
.card-art { .card-art {
font-size: 1.7rem; font-size: 1.7rem;
@@ -2986,11 +2986,29 @@ h3 {
.card-lg .card-art { .card-lg .card-art {
font-size: 1.85rem; font-size: 1.85rem;
} }
/* In-tray cards give more of their height to the rule panel so the ability
text has room to breathe (the magnified view keeps the roomy 58% scene). */
.shop-row .card-scene,
.deck-row .card-scene {
flex-basis: 49%;
}
/* A lift on tap would poke out of a sideways-scrolling strip and trip its /* A lift on tap would poke out of a sideways-scrolling strip and trip its
scrollbar; keep the feedback small on touch. */ scrollbar; keep the feedback small on touch. */
.card.is-clickable:hover { .card.is-clickable:hover {
transform: translateY(-3px); transform: translateY(-3px);
} }
/* The trays scroll sideways, which clips vertical overflow — so the selected
card's lift, gold outline, and check badge would get cut off at the top.
Give the rows headroom and tuck the badge just inside the card corner. */
.card.is-selected {
transform: translateY(-3px);
}
.card-check {
top: -3px;
right: -3px;
width: 22px;
height: 22px;
}
/* --- shop: compact trays, one horizontal row each --- */ /* --- shop: compact trays, one horizontal row each --- */
.shop { .shop {
@@ -3017,7 +3035,7 @@ h3 {
} }
.shop-row-wrap, .shop-row-wrap,
.deck-wrap { .deck-wrap {
padding: 9px 10px 11px; padding: 5px 6px 7px;
border-radius: 14px; border-radius: 14px;
} }
/* A full six-pet deck (or the shop row on a very narrow phone) scrolls /* A full six-pet deck (or the shop row on a very narrow phone) scrolls
@@ -3027,10 +3045,12 @@ h3 {
.deck-row { .deck-row {
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
gap: 8px; gap: 6px;
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding-bottom: 2px; /* Headroom for the selected card's lift + outline + check badge, which the
sideways scroll would otherwise clip. */
padding: 12px 6px 6px;
scrollbar-width: thin; scrollbar-width: thin;
} }
.shop-row { .shop-row {