/* ========================================================== RONIN: SLASHDOWN v3.1.4 — MOBILE FINAL ALIGNMENT / POLISH Loads AFTER v3.1.3. ========================================================== */ /* ========================================================== PHONE ========================================================== */ @media(max-width:767px){ /* -------------------------------------------------------- 1. GAME BOARD — TRUE CENTER / MAX PLAYABLE SIZE -------------------------------------------------------- */ #gameScreen .battle-layout{ width:100%!important; padding: 5px 5px 8px!important; box-sizing:border-box!important; overflow-x:hidden!important; } #gameScreen .board-column{ width:100%!important; min-width:0!important; margin:0!important; padding:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; box-sizing:border-box!important; overflow-x:hidden!important; } /* * Never use raw 100vw here. * * Safari's visual viewport + parent padding can make 100vw * a few pixels wider than the actual app content area. * * 100% of the board-column is the correct measurement. */ #gameScreen .board-shell{ position:relative!important; width: min( calc(100% - 2px), 760px )!important; max-width: calc(100% - 2px)!important; height:auto!important; aspect-ratio:1 / 1!important; margin: 2px auto 0!important; padding:5px!important; box-sizing:border-box!important; align-self:center!important; justify-self:center!important; left:auto!important; right:auto!important; transform:none!important; overflow:hidden!important; } #gameScreen .board{ width:100%!important; height:100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; overflow:hidden!important; } #gameScreen .tile{ box-sizing:border-box!important; min-width:0!important; min-height:0!important; } /* Prevent Boost rail from affecting page width. */ #gameScreen #roninBoostBar{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; overflow:hidden!important; } #gameScreen .boost-buttons{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; overflow-x:auto!important; overflow-y:hidden!important; } /* -------------------------------------------------------- 2. HOME HERO — SHOW COMPLETE RONIN ARTWORK -------------------------------------------------------- */ #homeScreen .hero-stage{ position:relative!important; min-height: calc( 100dvh - var(--app-header) - var(--app-dock) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px )!important; padding: 18px 17px 18px!important; display:flex!important; align-items:flex-end!important; overflow:hidden!important; } /* * Give the character a dedicated upper presentation zone. * Entire artwork stays inside the card instead of hanging * off the right edge. */ #homeScreen .hero-art{ position:absolute!important; top:8px!important; left:50%!important; right:auto!important; width:94%!important; height:53%!important; max-width:none!important; transform: translateX(-50%)!important; object-fit:contain!important; object-position:center top!important; opacity:.94!important; pointer-events:none!important; filter: drop-shadow( 0 22px 32px rgba(0,0,0,.70) ) drop-shadow( 0 0 20px rgba(255,34,75,.12) )!important; } /* * Keep copy in its own lower section instead of competing * horizontally with the artwork. */ #homeScreen .hero-copy{ position:relative!important; width:100%!important; max-width:none!important; margin:0!important; padding-top: min( 48dvh, 430px )!important; z-index:5!important; } #homeScreen .hero-logo{ width: min( 78vw, 330px )!important; max-width:100%!important; height:auto!important; margin: 0 0 7px!important; object-fit:contain!important; object-position:left center!important; } #homeScreen .hero-copy p:not(.eyebrow){ width:100%!important; max-width:100%!important; margin: 8px 0 15px!important; font-size:14px!important; line-height:1.46!important; } /* -------------------------------------------------------- 3. LEADERBOARD — TRUE MOBILE RANK CARD -------------------------------------------------------- */ #leaderboardScreen .firebase-leaderboard-rows{ width:100%!important; margin-top:18px!important; display:grid!important; gap:9px!important; } /* * PHONE STRUCTURE: * * #1 | USERNAME SCORE * | 2 / 20 TRIALS WAR SCORE */ #leaderboardScreen .firebase-leader-row{ width:100%!important; min-height:76px!important; margin:0!important; padding: 11px 12px!important; display:grid!important; grid-template-columns: 38px minmax(0,1fr) auto!important; grid-template-rows: auto auto!important; grid-template-areas: "rank handle score" "rank trials score"!important; column-gap:10px!important; row-gap:3px!important; align-items:center!important; box-sizing:border-box!important; border-radius:15px!important; overflow:hidden!important; } #leaderboardScreen .firebase-rank{ grid-area:rank!important; display:flex!important; align-items:center!important; justify-content:center!important; width:34px!important; height:42px!important; font-size:19px!important; line-height:1!important; text-align:center!important; } #leaderboardScreen .firebase-handle{ grid-area:handle!important; display:block!important; visibility:visible!important; opacity:1!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; color:#eafcff!important; font-size:13px!important; line-height:1.2!important; font-weight:1000!important; letter-spacing:.055em!important; text-align:left!important; } #leaderboardScreen .firebase-handle small{ display:inline-block!important; margin-left:6px!important; color:#ff4a97!important; font-size:6px!important; vertical-align:middle!important; } #leaderboardScreen .firebase-trials{ grid-area:trials!important; display:block!important; visibility:visible!important; opacity:1!important; color:#7898a5!important; font-size:8px!important; line-height:1.2!important; font-weight:900!important; letter-spacing:.10em!important; text-align:left!important; } #leaderboardScreen .firebase-trials::after{ content:" TRIALS"; font-size:6px!important; color:#546e79!important; } #leaderboardScreen .firebase-score{ grid-area:score!important; display:flex!important; flex-direction:column!important; align-items:flex-end!important; justify-content:center!important; min-width:82px!important; color:#fff!important; font-size:18px!important; line-height:1.05!important; text-align:right!important; } #leaderboardScreen .firebase-score::before{ content:"WAR SCORE"; display:block!important; margin-bottom:5px!important; color:#688591!important; font-size:6px!important; line-height:1!important; font-weight:900!important; letter-spacing:.12em!important; } #leaderboardScreen .firebase-leader-row.is-you{ background: linear-gradient( 100deg, rgba(255,40,100,.12), rgba(0,235,255,.05) )!important; } /* -------------------------------------------------------- LEADERBOARD HERO CARD — TIGHTEN PHONE PROPORTIONS -------------------------------------------------------- */ #leaderboardScreen .route-shell{ margin: 10px!important; padding: 15px!important; border-radius: 20px!important; } #leaderboardScreen .route-hero{ padding: 7px 1px 14px!important; } #leaderboardScreen .route-hero h1{ font-size: clamp( 26px, 7.4vw, 32px )!important; line-height:1.04!important; } #leaderboardScreen .route-hero p{ font-size:13px!important; line-height:1.47!important; } /* Period buttons remain one clean row. */ #leaderboardScreen [data-period]{ min-width:0!important; min-height:48px!important; padding: 8px 5px!important; font-size:10px!important; white-space:nowrap!important; } } /* ========================================================== SMALL PHONES ========================================================== */ @media(max-width:390px){ #homeScreen .hero-art{ width:98%!important; height:50%!important; } #homeScreen .hero-copy{ padding-top: min( 44dvh, 360px )!important; } #leaderboardScreen .firebase-leader-row{ grid-template-columns: 32px minmax(0,1fr) auto!important; padding: 10px 9px!important; column-gap:7px!important; } #leaderboardScreen .firebase-handle{ font-size:11px!important; } #leaderboardScreen .firebase-score{ min-width:70px!important; font-size:16px!important; } } /* ========================================================== TABLETS / iPAD ========================================================== */ @media(min-width:768px) and (max-width:1199px){ /* * Tablet game board stays visually centered in its * dedicated game region. */ #gameScreen .board-column{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; } #gameScreen .board-shell{ width: min( 64vw, 680px, calc( 100dvh - var(--app-header) - var(--app-dock) - 170px ) )!important; max-width:680px!important; margin: auto!important; left:auto!important; right:auto!important; transform:none!important; } /* * Tablet hero gets side-by-side cinematic composition, * but character remains completely inside viewport. */ #homeScreen .hero-art{ top:4%!important; right:2%!important; left:auto!important; width:54%!important; height:90%!important; object-fit:contain!important; object-position:center right!important; transform:none!important; } #homeScreen .hero-copy{ width:48%!important; max-width:540px!important; padding-top:0!important; } /* * Tablet leaderboard keeps full four-column structure. */ #leaderboardScreen .firebase-leader-row{ grid-template-columns: 52px minmax(0,1fr) 110px 145px!important; min-height:68px!important; padding: 11px 16px!important; gap:13px!important; } #leaderboardScreen .firebase-handle{ display:block!important; visibility:visible!important; opacity:1!important; font-size:14px!important; } #leaderboardScreen .firebase-trials{ display:block!important; visibility:visible!important; text-align:center!important; } }