/* ══════════════════════════════════════════════════════════════════════════ responsive.css — Flappy War Strategy: LANDSCAPE is the primary mobile layout. All orientations are playable — no rotation gate. Desktop layout is untouched by rules in this file. ══════════════════════════════════════════════════════════════════════════ */ /* ── Prevent browser interference ──────────────────────────────────────────── */ html { overflow: hidden; height: 100%; /* iOS Safari: kill font scaling when rotating */ -webkit-text-size-adjust: 100%; } body { overflow: hidden; height: 100%; /* position:fixed is the most reliable iOS rubber-band kill */ position: fixed; width: 100%; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; /* pan-x pan-y allows scrollable descendants (like the leaderboard table) to actually scroll. `touch-action: none` here would block ALL gestures globally — CSS spec: an ancestor's restriction overrides descendants. */ touch-action: pan-x pan-y; } /* Restore natural tap behaviour on interactive elements only */ button, a, input, select, textarea, [role="button"] { touch-action: manipulation; } /* Kill browser pan/zoom on canvases without blocking touch routing */ #canvas-root canvas { touch-action: none; } /* App container: block all browser gestures; child elements override as needed */ #app { touch-action: none; user-select: none; -webkit-user-select: none; } /* ── iOS safe-area insets (notch / Dynamic Island) ───────────────────────── */ #game-hud { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } /* Online play hides #hud-time on mobile via the media queries below, but the "RED GANA EN" survival countdown lives there and BOTH players must see it. Higher specificity (body.online-active #id) beats the `#hud-time` hide even with !important, on every screen size. */ body.online-active #hud-time { display: inline-block !important; } @supports (padding-top: env(safe-area-inset-top)) { #soc-panel { padding-bottom: env(safe-area-inset-bottom, 0px); } } /* ══════════════════════════════════════════════════════════════════════════ PORTRAIT TOUCH DEVICES — rotate the entire app into landscape silently. No prompt; content rotates to fill the portrait viewport sideways. Math: #app is resized to 100vh × 100vw (landscape dims), centered at the viewport midpoint, then rotated -90° so the landscape layout fills the portrait screen without any gap or overflow. CSS hit-testing is transform-aware, so menus and touch input work correctly without any coordinate remapping. ══════════════════════════════════════════════════════════════════════════ */ /* (max-width: 1100px) ensures this block is SKIPPED when viewport is forced to 1280px by the meta tag — so mobile devices get the desktop layout. */ @media (orientation: portrait) and (hover: none) and (pointer: coarse) and (max-width: 1100px) { #app { /* svh = "small viewport height" = height when ALL browser chrome is visible. Using the same unit for both width AND centering ensures the rotated game always fits the actual visible area, regardless of whether the URL bar or nav bar is shown. lvh (large) caused the game to overflow when bars were visible because lvh > actual-visible-height. */ width: 100vh !important; /* fallback for very old browsers */ width: 100svh !important; /* preferred: stable with chrome visible */ height: 100vw !important; top: calc((100vh - 100vw) / 2) !important; /* fallback */ top: calc((100svh - 100vw) / 2) !important; left: calc((100vw - 100vh) / 2) !important; /* fallback */ left: calc((100vw - 100svh) / 2) !important; right: auto !important; bottom: auto !important; transform: rotate(90deg); transform-origin: center center; } /* Compact HUD — after rotation the "height" is the physical width (~390 px) */ #game-hud { height: 44px !important; padding: 0 10px !important; gap: 7px !important; } #hud-score { font-size: 9px !important; } #hud-level { font-size: 11px !important; letter-spacing: 2px !important; } #hud-time { display: none !important; } /* SOC panel is keyboard-only — hide on touch devices */ #soc-panel { display: none !important; } /* safe center: centers content when it fits; falls back to flex-start when it overflows — prevents top-content being clipped (the "data loss" issue with plain center + overflow:hidden). Matches the reference landscape look. */ #screen-title, #screen-diff, #screen-nickname, #screen-result, #screen-leaderboard, #screen-leaderboard-mission { overflow: hidden; justify-content: safe center; } /* * ── Content sizing — calibrated for the effective landscape after rotation ── * * After rotate(90deg), the game renders as a landscape viewport of: * width = 100vh (portrait height, e.g. 852 px on iPhone 14 Pro) * height = 100vw (portrait width, e.g. 393 px) * * IMPORTANT: vw units here evaluate against the PORTRAIT width (~393 px), * not the effective 852 px landscape width. Use vh for horizontal sizing * (vh = portrait height = effective landscape width) or fixed values. * * Target range: ~670–930 px effective width × ~375–430 px effective height. */ /* ── Title screen ── Sizes calibrated for forced viewport width=540. After rotation, effective landscape is ~1078 wide × 540 tall CSS — content must fit in 540 vertical. Reduced from earlier draft to make room for card descriptions. */ .title-owl { width: 95px; height: 95px; margin-bottom: 6px; } .venue-badge { font-size: 13px; letter-spacing: 2px; margin-bottom: 8px; padding: 4px 14px; } .title-logo { font-size: clamp(40px, 7vh, 68px) !important; margin-bottom: 4px; letter-spacing: 5px; } .title-sub { font-size: 14px !important; letter-spacing: 3px !important; margin-bottom: 10px; } /* 4 mode cards now — narrower so they stay on ONE row in the rotated landscape */ .mode-cards { gap: 10px; margin-bottom: 8px; } .mode-card { width: 156px; padding: 12px 11px 10px; } .card-icon { font-size: 30px; margin-bottom: 5px; } .card-title { font-size: 18px; letter-spacing: 2px; margin-bottom: 4px; } /* Card descriptions on mobile — bold + brighter so they read clearly */ .card-desc { font-size: 13px !important; line-height: 1.6 !important; margin-top: 4px; font-weight: 700 !important; color: rgba(225,240,255,0.92) !important; } .pvp-notice-sub { font-size: 12px !important; font-weight: 700 !important; color: rgba(225,240,255,0.92) !important; } .card-badge { font-size: 13px; } .ember-divider { margin-bottom: 8px; } /* ── Title screen bottom ── */ /* Move ranking links to landscape-top (portrait-right) so they're always reachable. order:-1 pulls them before the owl in the flex column. */ .title-links { order: -1 !important; margin-top: 0 !important; margin-bottom: 8px !important; gap: 16px !important; font-size: 13px !important; } .title-logos { margin-top: 8px !important; margin-bottom: 4px !important; gap: 18px !important; } .title-logos img { height: 40px !important; } .title-logos > div { height: 32px !important; } .title-credit { font-size: 11px !important; letter-spacing: 2px !important; } /* ── Difficulty screen ── */ #screen-diff { gap: 14px !important; } .diff-title { font-size: clamp(28px, 5vh, 48px) !important; letter-spacing: 4px; margin-bottom: 8px; } .diff-subtitle { font-size: 14px !important; margin-bottom: 16px !important; } .diff-cards { gap: 14px; } .diff-card { width: 180px; padding: 20px 16px 16px; } .diff-label { font-size: 20px; } .diff-desc { font-size: 12px; font-weight: 700 !important; color: rgba(225,240,255,0.92) !important; } /* ── Buttons ── */ .btn-primary { padding: 14px 32px; font-size: 18px; letter-spacing: 3px; } .btn-secondary { padding: 10px 22px; font-size: 14px; letter-spacing: 2px; } .btn-back { font-size: 14px; letter-spacing: 2px; padding: 8px 18px; } .btn-group { gap: 10px; margin-top: 14px !important; } /* ── Nickname screen ── IMPORTANT: blade.php has a