/* public/css/app.css — accessibility-driven CSS keyed off attributes. */ :root { --tile: #6b7280; } html[data-text-size="normal"] { font-size: 18px; } html[data-text-size="large"] { font-size: 24px; } html[data-text-size="xlarge"] { font-size: 32px; } html[data-theme="light"] { background:#ffffff; color:#111827; } html[data-theme="dark"] { background:#0f172a; color:#f1f5f9; } html[data-theme="contrast"] { background:#000000; color:#ffff00; } html[data-reduce-motion="true"] * { transition: none !important; animation: none !important; } /* Phone-fit constraints: text size may scale up, but layout must never exceed the viewport. min(rem, vw) keeps desktop sizes unchanged while capping widths on narrow screens. */ #keyboard { width: 100%; max-width: 480px; } #keyboard > div { width: 100%; gap: min(0.25rem, 1vw); } #keyboard .key { flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; font-size: min(1rem, 4vw); } #keyboard .key[data-key="enter"] { flex-grow: 1.7; font-size: min(1rem, 3.4vw); } #keyboard .key[data-key="back"] { flex-grow: 1.4; } #board:has(.tile) { gap: min(0.25rem, 1vw); } #board:has(.card) { gap: min(0.5rem, 1.5vw); } #board .tile { width: min(3rem, 15vw); height: min(3rem, 15vw); font-size: min(1.5rem, 8vw); } #board .card { width: min(4rem, 17vw); height: min(4rem, 17vw); font-size: min(1.875rem, 9vw); } /* Word-Guess tile colors; symbols shown only in color-safe mode. */ .tile-correct { background:#16a34a; color:#fff; } .tile-present { background:#ca8a04; color:#fff; } .tile-absent { background:#6b7280; color:#fff; } .tile .symbol { display:none; } html[data-color-safe="true"] .tile .symbol { display:inline; }