/* ============================================================ FULLSCREEN CARD MODE Activated by adding class "fullscreen-card" to All rules scoped under body.fullscreen-card so they only apply when the toggle is active. Default mode is unchanged. ============================================================ */ /* ── Override body.test-android constraints ───────────────── */ /* test-android locks body to 360px; fullscreen mode needs full viewport */ body.fullscreen-card.test-android { max-width: none !important; padding: 0 !important; } /* ── Card Container Sizing ─────────────────────────────────── */ /* Use body.fullscreen-card.test-android for higher specificity to beat the body.test-android .card-container rule (0,2,1 > 0,1,1) */ /* On phones, fill the viewport */ @media (max-width: 480px) { body.fullscreen-card .card-container, body.fullscreen-card.test-android .card-container { width: 100vw !important; height: min(100vh, calc(100vw * 1.576)) !important; /* 520/330 aspect */ max-height: 100vh !important; max-width: none !important; box-shadow: none !important; } } /* On tablets, scale up more */ @media (min-width: 481px) and (max-width: 768px) { body.fullscreen-card .card-container, body.fullscreen-card.test-android .card-container { width: min(calc(100vw - 20px), calc(100vh / 1.576)) !important; height: min(100vh, calc((100vw - 20px) * 1.576)) !important; max-width: none !important; } } /* On desktops, scale card to fill viewport height while keeping aspect ratio */ @media (min-width: 769px) { body.fullscreen-card .card-container, body.fullscreen-card.test-android .card-container { width: min(calc(100vh / 1.576), calc(100vw - 40px)) !important; height: min(100vh, calc((100vw - 40px) * 1.576)) !important; max-height: 100vh !important; max-width: none !important; } } /* ── Pseudo-elements: fill container instead of fixed 330x520 ── */ body.fullscreen-card .card-container::before, body.fullscreen-card .card-container::after { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; } body.fullscreen-card .card-container::before { background-size: 100% 100% !important; } /* ── Back Button: top-left of card ─────────────────────────── */ body.fullscreen-card .back-button { top: 2px !important; left: 2px !important; transform: none !important; } body.fullscreen-card .team-display-overlay .back-button { top: 2px !important; left: 2px !important; transform: none !important; } body.fullscreen-card #quitButton.back-button { top: 2px !important; left: 2px !important; transform: none !important; } /* ── Controls Box (responsive-card-layout-v2) ──────────────── */ body.fullscreen-card .controls-box { width: 100% !important; } /* ── INDEX PAGE: button area and golden buttons ───────────── */ body.fullscreen-card .button-area { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; } body.fullscreen-card .button-area .golden-button { width: 60.6% !important; /* ~200px of 330px */ height: 9.6% !important; /* ~50px of 520px */ font-size: clamp(14px, 2.8vh, 24px) !important; } body.fullscreen-card .button-area .golden-button:nth-child(1) { top: 26.9% !important; /* ~140px of 520px */ } body.fullscreen-card .button-area .golden-button:nth-child(2) { top: 74% !important; /* ~385px of 520px */ } body.fullscreen-card .button-area .golden-button:nth-child(3) { top: 86.5% !important; /* ~450px of 520px */ } /* ── LOGIN PAGE ────────────────────────────────────────────── */ body.fullscreen-card .login-title-box { top: 3.5% !important; /* ~18px of 520px */ } body.fullscreen-card .login.html .form-area, body.fullscreen-card .form-area { /* Will be further refined by page-specific selectors below */ } /* ── REGISTER PAGE ─────────────────────────────────────────── */ body.fullscreen-card .create-account-title-box { top: 1.9% !important; /* ~10px of 520px */ } /* ── JOIN PAGE ─────────────────────────────────────────────── */ body.fullscreen-card .join-title-box { top: 1.9% !important; /* ~10px of 520px */ } /* ── GAME RULES PAGE ───────────────────────────────────────── */ body.fullscreen-card .rules-title-box { top: 1.9% !important; /* ~10px of 530px */ } /* ── TEAM DISPLAY PAGE ─────────────────────────────────────── */ body.fullscreen-card .group-dynamics-box { top: 1.9% !important; /* ~10px of 530px */ } /* ── GAME END PAGE ─────────────────────────────────────────── */ body.fullscreen-card .end-game-area { width: 87.9% !important; /* ~290px of 330px */ max-height: 92.3% !important; /* ~480px of 520px */ } /* ============================================================ PAGE-SPECIFIC FORM/CONTENT AREA OVERRIDES Use page-identifying selectors for specificity ============================================================ */ /* -- Login page form area -- */ body.fullscreen-card .form-area { top: 39.4% !important; /* ~205px of 520px - login default */ width: 75.8% !important; /* ~250px of 330px */ } /* -- Register page form area (narrower, lower) -- */ body.fullscreen-card .create-account-title-box ~ .form-area, body.fullscreen-card .form-area[action*="register"] { top: 40.4% !important; /* ~210px of 520px */ width: 60.6% !important; /* ~200px of 330px */ } /* -- Join page form area -- */ body.fullscreen-card .join-title-box ~ .form-area { top: 28.8% !important; /* ~150px of 520px */ width: 75.8% !important; /* ~250px of 330px */ } /* ============================================================ GAME-LOBBY PAGE ============================================================ */ /* Remove the forced 330x520 on game-lobby card container */ @media (max-width: 480px) { body.fullscreen-card .card-container { width: 100vw !important; height: min(100vh, calc(100vw * 1.576)) !important; } } /* Lobby content area */ body.fullscreen-card .lobby-area { left: 4.85% !important; /* ~16px inset from card edge */ top: 9.4% !important; /* ~49px from top of card */ width: 90.6% !important; /* content area within card borders */ height: 89.6% !important; /* content area within card borders */ } /* Lobby title */ body.fullscreen-card .lobby-title { top: 3.8% !important; /* ~20px from top of card */ } /* Team badge overlay */ body.fullscreen-card .team-badge-overlay { top: 5.8% !important; /* ~30px from top of card */ } /* Leave button */ body.fullscreen-card .leave-button { bottom: 12.5% !important; /* ~65px of 520px */ } /* Team display overlay background */ body.fullscreen-card .team-display-overlay { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; background-size: 100% 100% !important; } /* Team display overlay elements */ body.fullscreen-card .team-display-overlay .group-dynamics-box, body.fullscreen-card #teamDisplayContainer .group-dynamics-box { top: 1.9% !important; /* ~10px */ } body.fullscreen-card .team-display-overlay .team-info-box, body.fullscreen-card .team-info-box { top: 19.6% !important; /* ~102px of 520px */ } body.fullscreen-card .team-display-overlay .waiting-screen { top: 42.3% !important; /* ~220px of 520px */ width: 75% !important; max-width: 75% !important; } body.fullscreen-card .skip-button-section { bottom: 12.5% !important; /* ~65px of 520px */ } /* ============================================================ GAMEPLAY PAGE ============================================================ */ /* Game content area */ body.fullscreen-card #gameContent { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; } /* Logo overlay */ body.fullscreen-card .logo-overlay { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; background-size: 100% 100% !important; } /* Flip animation */ body.fullscreen-card .flip-animation { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; } /* Flip animation GIF image */ body.fullscreen-card .flip-animation img { width: 100% !important; height: 100% !important; } /* Timer positioning */ body.fullscreen-card .timer-info { top: 11.7% !important; /* ~61px of 520px */ width: 74.8% !important; /* ~247px of 330px */ } body.fullscreen-card .timer-info.guesser-timer-info { top: 25.6% !important; /* ~133px of 520px */ } /* Message box overlay */ body.fullscreen-card .message-box-overlay { height: 20.4% !important; /* ~106px of 520px */ } /* Words area */ body.fullscreen-card .words-area { top: 20.4% !important; /* ~106px of 520px */ width: 75.8% !important; /* ~250px of 330px */ max-width: 75.8% !important; height: 70.2% !important; /* ~365px of 520px */ } /* Review phase words area */ body.fullscreen-card .words-area-review { top: 20.4% !important; /* ~106px of 520px */ width: 75.8% !important; max-width: 75.8% !important; height: 70.2% !important; } /* End turn button */ body.fullscreen-card .end-turn-button { top: 94.2% !important; /* ~490px of 520px */ width: 75.2% !important; /* ~248px of 330px */ } /* Waiting screen */ body.fullscreen-card .waiting-screen { top: 15.4% !important; /* ~80px of 520px */ width: 75.8% !important; max-width: 75.8% !important; height: 80.8% !important; /* ~420px of 520px */ } /* Team display container elements in gameplay */ body.fullscreen-card #teamDisplayContainer { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; } body.fullscreen-card #teamDisplayContainer .waiting-screen { top: 38.5% !important; /* ~200px of 520px */ width: 75% !important; max-width: 75% !important; } body.fullscreen-card #teamDisplayContainer .team-info-box { top: 21.5% !important; /* ~112px of 520px */ } body.fullscreen-card #teamDisplayContainer .skip-button-section { bottom: 10.2% !important; /* ~53px of 520px */ } /* Card swap button */ body.fullscreen-card .card-swap-button { top: 2px !important; right: 2px !important; transform: none !important; } /* Team display overlay in gameplay */ body.fullscreen-card .team-display-overlay::before { background-size: 100% 100% !important; } /* ============================================================ GAME RULES & TEAM DISPLAY PAGES (wider containers) ============================================================ */ /* In fullscreen mode, use standard card ratio instead of extra-wide */ @media (max-width: 480px) { body.fullscreen-card .game-rules .card-container, body.fullscreen-card .card-container { width: 100vw !important; height: min(100vh, calc(100vw * 1.576)) !important; } } body.fullscreen-card .game-rules .card-container { background-size: 100% 100% !important; background-position: center !important; } /* Game rules form area */ body.fullscreen-card .game-rules .form-area, body.fullscreen-card .rules-title-box ~ .form-area { left: 5.6% !important; /* ~21px inset */ top: 10.2% !important; /* ~54px */ width: 79.1% !important; height: 89.8% !important; } /* Team display container */ body.fullscreen-card #teamDisplayContainer .waiting-screen { width: 75% !important; max-width: 75% !important; } body.fullscreen-card .team-info-box .team-number, body.fullscreen-card .team-info-box .player-count { /* These are fine as-is, just the container position changes */ } /* ============================================================ LOBBY PAGE (uses responsive-card-layout-v2.css) ============================================================ */ /* Lobby page lobby-area uses different base dimensions (340x530) */ /* Already handled by the general .lobby-area rule above */ /* ============================================================ JOIN-GUEST PAGE ============================================================ */ body.fullscreen-card .form-area[style], body.fullscreen-card .join-guest .form-area { left: 11.2% !important; /* ~37px of 330px */ top: 19.2% !important; /* ~100px of 520px */ width: 77.6% !important; height: 76.9% !important; } /* ============================================================ TOGGLE BUTTON STYLES ============================================================ */ .fullscreen-toggle-wrap { position: fixed; bottom: 8px; right: 8px; z-index: 9999; display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.65); padding: 5px 10px; border-radius: 20px; cursor: pointer; user-select: none; font-size: 12px; color: #fff; transition: background 0.2s; } .fullscreen-toggle-wrap:hover { background: rgba(0, 0, 0, 0.85); } .fullscreen-toggle-wrap .toggle-label { white-space: nowrap; } .fullscreen-toggle-wrap .toggle-switch { position: relative; width: 34px; height: 18px; background: #666; border-radius: 9px; transition: background 0.2s; } .fullscreen-toggle-wrap .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: left 0.2s; } body.fullscreen-card .fullscreen-toggle-wrap .toggle-switch { background: #4CAF50; } body.fullscreen-card .fullscreen-toggle-wrap .toggle-switch::after { left: 18px; }