/* CSS Reset — Minimal normalize for consistent cross-browser rendering */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; font-size: 16px; -webkit-text-size-adjust: 100%; } body { height: 100%; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; user-select: none; } /* Defense-in-depth against the html-level zoom hack in viewport-scale.js: on landscape activity pages, suppress any scrollbar that browser-quirk overflow might introduce. Scoped to .game-container pages so nav pages (okuryazarlik.html / matematik.html) keep their natural vertical scroll on short landscape windows. */ @media (orientation: landscape) { body:has(.game-container) { overflow: hidden; } } img, picture, svg { display: block; max-width: 100%; -webkit-user-drag: none; user-drag: none; pointer-events: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } button:focus-visible { outline: 3px solid var(--color-primary, #8B5CF6); outline-offset: 2px; border-radius: var(--radius-sm, 12px); } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; -webkit-user-drag: none; user-drag: none; } button, a { -webkit-touch-callout: none; } /* Touch responsiveness on mobile — disable iOS Safari's 300ms double-tap-zoom delay on every interactive game element. Children CANNOT read so they never need double-tap behavior; every tap should feel immediate. */ button, [role="button"], a, .option-card, .combination-card, .object-card, .answer-btn, .sound-speaker, .btn-listen, .btn-play-again, .btn-back, .btn-home, .btn-speaker, .btn-tamam, .category-card, .activity-tile, .domain-card { touch-action: manipulation; } /* ───────────────────────────────────────────────────────────────────────── Orientation guard — full-screen overlay shown when the device is in the wrong orientation for its type. Web pages cannot truly lock orientation (the Screen Orientation API requires fullscreen + isn't supported on iOS Safari), so we present a "rotate" prompt that auto-dismisses when the user rotates back to the supported orientation. Touch devices (phones/tablets) → require PORTRAIT Non-touch devices (desktops) → require LANDSCAPE The overlay HTML is injected into by viewport-scale.js. CSS here controls visibility purely via media queries — no JS needed for show/hide. ───────────────────────────────────────────────────────────────────────── */ .orientation-guard { display: none; position: fixed; inset: 0; z-index: 99999; background: linear-gradient(135deg, #8B5CF6 0%, #6d28d9 100%); color: #ffffff; align-items: center; justify-content: center; padding: 32px; text-align: center; font-family: 'Quicksand', system-ui, sans-serif; -webkit-user-select: none; user-select: none; /* Use safe area on devices with notches (rotated landscape iPhone) */ padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); } .orientation-guard__panel { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 420px; } .orientation-guard__icon { width: 96px; height: 96px; color: #ffffff; animation: orientation-rotate-hint 2.4s ease-in-out infinite; } @keyframes orientation-rotate-hint { 0%, 100% { transform: rotate(0); } 45%, 55% { transform: rotate(-90deg); } } .orientation-guard__msg { display: none; font-size: 1.4rem; font-weight: 600; line-height: 1.4; margin: 0; } .orientation-guard__msg small { display: block; font-size: 0.95rem; font-weight: 400; opacity: 0.78; margin-top: 6px; } /* Touch device in landscape → ask for portrait */ @media (pointer: coarse) and (orientation: landscape) { .orientation-guard { display: flex; } .orientation-guard__msg--portrait { display: block; } /* Hide the game while overlay is active so the user only sees the prompt */ body > .game-container, body > .nav-content, body > .head-bar, body > .deco-bg, body > main { visibility: hidden; } } /* Non-touch device (desktop) in portrait → ask for landscape (rare — vertical monitors). */ @media (pointer: fine) and (orientation: portrait) { .orientation-guard { display: flex; } .orientation-guard__msg--landscape { display: block; } body > .game-container, body > .nav-content, body > .head-bar, body > .deco-bg, body > main { visibility: hidden; } }