diff --git a/web/src/styles.css b/web/src/styles.css index 613c5ce..4728b34 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -2945,14 +2945,14 @@ h3 { /* --- cards: printed small --- */ .card { - width: 78px; - height: 108px; + width: 80px; + height: 126px; padding: 4px; gap: 3px; } .card-lg { - width: 82px; - height: 114px; + width: 80px; + height: 132px; } .card-sm { width: 60px; @@ -2975,10 +2975,10 @@ h3 { font-size: 0.66rem; } .card-effect { - font-size: 0.48rem; + font-size: 0.55rem; } .card-lg .card-effect { - font-size: 0.5rem; + font-size: 0.57rem; } .card-art { font-size: 1.7rem; @@ -2986,11 +2986,29 @@ h3 { .card-lg .card-art { 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 scrollbar; keep the feedback small on touch. */ .card.is-clickable:hover { 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 { @@ -3017,7 +3035,7 @@ h3 { } .shop-row-wrap, .deck-wrap { - padding: 9px 10px 11px; + padding: 5px 6px 7px; border-radius: 14px; } /* A full six-pet deck (or the shop row on a very narrow phone) scrolls @@ -3027,10 +3045,12 @@ h3 { .deck-row { flex-wrap: nowrap; justify-content: flex-start; - gap: 8px; + gap: 6px; overflow-x: auto; -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; } .shop-row {