Increase top padding from 5px to 20px so the deck/discard sit lower,
giving the held card more breathing room from the opponents row above.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Reduce held card overlap offset from 0.35 to 0.15 on mobile portrait
so it doesn't cover the second row of opponents. Increase bottom
padding on opponents row from 6px to 12px for more breathing room.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove margin-top from base rules/leaderboard/matchmaking styles so
desktop and landscape layouts are unaffected. The 50px top margin is
now only applied via the mobile-portrait override.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Override width:100% from .btn base class with width:auto on both
back buttons. Add padding-bottom and border-bottom to leaderboard
header to match rules page styling.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Position the button absolutely on the left side of the header,
vertically centered with the title. Remove mobile fixed-position
override that placed it in the top bar.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Prevents auth bar from overlapping back buttons. Back buttons
align to start instead of stretching full width.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove game-screen padding and replace solid dark header background
with subtle dark-to-transparent gradient matching mobile treatment.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The desktop #game-screen.active had padding:10px that was never
overridden in the mobile portrait styles.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replaces background:none with a dark-to-transparent gradient so the
status message and mute button are visible against the green felt.
Reverts mute button circle in favor of the gradient approach.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The desktop game-header background was still showing on mobile,
creating a visible dark band with padding around the status bar.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove left/right/top padding from notification bar so it spans edge
to edge, and increase bottom margin from 4px to 8px for more breathing
room before the opponents row.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace margin:auto on table-center with space-evenly on player-row
so the draw pile and player cards are equally spaced vertically.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Increase horizontal padding on game-table (4px to 10px) and header
(8px to 12px) to prevent edge clipping. Change opponents-row overflow
to visible so dealer chips aren't cut off.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bottom bar is hidden when the hole results modal opens and restored
when dismissed. Also adds mobile-specific compact styles for the
scoresheet: smaller cards, tighter spacing, reduced padding.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove position:fixed from the bottom bar and make it a flex-shrink:0
child of the game screen flex column. This guarantees the game layout
gets exactly the remaining viewport height with no overlap, regardless
of how the browser calculates viewport units.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Set --app-height CSS custom property from window.innerHeight via JS,
which is the only reliable way to get the actual visible viewport on
Chrome Android. Falls back to 100vh if JS hasn't loaded.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use position:fixed with inset:0 for the game screen instead of
height-based sizing. This bypasses the Chrome Android 100vh bug where
vh includes space behind the dynamic URL bar. Also adds
-webkit-fill-available fallback on body.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add 100vh fallback before 100dvh, max-height constraints on every flex
container in the layout chain, and explicit flex-basis 0% to prevent
Chrome from letting flex children grow beyond viewport bounds.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replaces fixed 120px width with calc((100% - 20px) / 3) so 3 opponents
always fit per row regardless of viewport width.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Also fix opponent areas shifting between rows on mobile by giving them
a fixed 120px width so name/score changes don't cause reflow.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Reduces from 38px to 22px and pulls offset from -10px to -4px so it
no longer overlaps the bottom bar buttons.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add bottom padding to game-table to reserve space for the fixed bottom
bar, and overflow:hidden on player-row so content respects flex bounds.
Also centers draw pile with equal spacing and adds dealer chip clearance.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove transform: scale(0.75) from the bar container which broke the
full-width layout and margin-auto pinning. Instead shrink font sizes
and padding on individual buttons and round info by ~25%.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bumps z-index from 500 to 900 so the bottom bar stays above side panel
drawers (600) but below card animation overlays (1000). Scales the bar
to 75% in mobile portrait to reduce visual footprint.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Reduces card sizes from 72×101 to 64×90 on mobile portrait to prevent
overlap with bottom bar when opponents wrap to 2 rows. Increases
horizontal gap between opponent hands from 4px to 10px for better
readability of player chips.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Forgot password form in auth modal with email input
- Reset password form handles token from email link
- /reset-password route serves index.html for SPA
- EMAIL_FROM env var in docker-compose
- Success/error feedback for both flows
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Hole indicator: margin-right auto, pill background, brighter text (0.9 opacity)
- End Game: margin-left auto, pinned to right edge
- Standings/Scores stay centered between them
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add round info and leave button to mobile-bottom-bar HTML
- Hide .round-info and #leave-game-btn from header on mobile
- Style round info as subtle text, leave button as red-tinted pill
- Slim down bottom bar: smaller gaps/padding to fit 4 items
- Sync round numbers and leave text via JS (renderGame + bindEvents)
- Frees up header space, reduces mobile crowding
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove excessive 44px bottom padding on game-table (was eating vertical space)
- Tighten opponents-row: reduce gap 6px->4px, side padding 8px->4px
- Reduce opponent-area side padding 5px->4px
- Allow opponent areas to shrink (remove flex-shrink: 0)
- 3 opponents now fit in ~367px, well within 412px Pixel 10 Pro
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Position fixed bottom:0 so buttons are always at the very bottom
- Remove dark background that was picking up the green felt color
- Add bottom padding to game-table so player cards aren't hidden behind bar
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Redesign bottom bar buttons as pill-shaped with subtle glass border
- Active state: warm gradient fill with glow shadow
- Tap feedback: scale(0.95) press effect
- Drawer panels: iOS-style cubic-bezier spring curve, drop shadow
- Backdrop transition matches drawer timing
- Darker bottom bar background with softer border for depth
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Change opponents-row from nowrap to flex-wrap: wrap (max 3+2 layout)
- Opponent cards: 32x45px -> 35x49px, font 0.6 -> 0.65rem
- Short screen: 26x36px -> 29x40px, font 0.45 -> 0.5rem
- 3 opponents at 35px fits 369px, well within 375px iPhone width
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Fix animation overlay cards rendering at wrong size: base .card CSS
(clamp 65px min) was overriding the inline dimensions set by JS.
Add !important to .draw-anim-front/.draw-anim-back width/height: 100%
so overlays always match their parent container size.
- Size opponent swap held card to match opponent card dimensions instead
of defaulting to deck size (looked oversized on mobile)
- Shrink dealer chip on mobile (38px -> 20px) to fit opponent areas
- Make header more compact: smaller fonts, tighter gaps, nowrap on badges
- Bump deck/discard to 72x101px to match player card size on mobile
- Add spacing between header/opponents, and between deck area/player cards
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add renderGame() guard during deal animation to prevent DOM destruction
mid-animation causing cards to pile up at wrong positions
- Push lobby content below fixed auth-bar (padding 15px -> 50px top)
- Scale player card font-size to 1.5rem/1.3rem for readable text on mobile
- Add full mobile portrait layout: bottom drawers, compact header, responsive
card grid sizing, safe-area insets, and mobile detection via matchMedia
- Add cardFontSize() helper for consistent proportional font scaling
- Add mobile bottom bar with drawer toggles for standings/scores
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
