/* WordDe game screen layout. Breakpoint: 960px. Above it, layout matches the pre-mobile desktop design. Dynamic per-player colours arrive as CSS custom properties set inline by the components; everything structural lives here so media queries can override it. This file must be linked last in App.razor's : .wd-clueboard ties MudBlazor's .mud-paper on specificity, so link order alone decides the winner. */ /* ---------- ClueBoard ---------- */ .wd-clueboard { min-width: 375px; flex: 0 0 auto; background-color: var(--wd-board-bg, #F5F5F5); } .wd-clueboard--focused { box-shadow: 0 0 8px 3px var(--wd-board-accent, transparent); } .wd-tile { min-width: 36px; max-width: 36px; } @media (max-width: 959.98px) { .wd-tile { flex: 1 1 0; min-width: 44px; max-width: none; } .wd-clueboard { min-width: 0; width: 100%; } } /* ---------- WorkBoard ---------- */ .wd-workboard { display: grid; grid-template-columns: minmax(90px, 120px) 1fr; align-items: center; gap: 8px; } .wd-workboard__name { display: flex; align-items: center; justify-content: center; } .wd-letter-grid { display: grid; grid-template-columns: repeat(26, 1fr); gap: 2px; } /* Each grid child is MudBadge's wrapper span, not the button itself. Without this the wrapper shrink-wraps and the button inside collapses to the width of its single character - roughly 10px - which both looks wrong and destroys the touch target the mobile grid below is sized to protect. */ .wd-letter-grid > * { width: 100%; } .wd-letter { min-width: 0; width: 100%; padding: 4px 0; } @media (max-width: 959.98px) { .wd-workboard { grid-template-columns: 1fr; gap: 4px; } .wd-workboard__name { justify-content: flex-start; } .wd-letter-grid { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 4px; } .wd-letter { min-height: 44px; } } /* ---------- ClueBoard stack ---------- */ .wd-board-stack { display: flex; flex-direction: row; justify-content: space-evenly; /* Both match the MudStack this replaced: Spacing="3" is a 12px gap, and an unset AlignItems left the flexbox default, stretching boards to a shared height. Desktop must be unchanged above the breakpoint. */ align-items: stretch; gap: 12px; } @media (max-width: 959.98px) { .wd-board-stack { flex-direction: column; } } /* ---------- Clue entry ---------- */ .wd-clue-entry { position: relative; display: flex; justify-content: center; } .wd-clue-input { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; /* opacity: 0 and NOT visibility/display: the input must stay a rendered, hit-testable, focusable element. Hiding it any other way stops the tap reaching it, and with it the soft keyboard - which is the entire reason this input exists. */ opacity: 0; border: 0; margin: 0; padding: 0; background: transparent; caret-color: transparent; cursor: text; font-size: 16px; /* below 16px, iOS Safari zooms the page on focus */ } /* The input's own focus ring is invisible at opacity 0, so the draft tiles below carry the focus indication instead - otherwise a keyboard user tabbing in gets no feedback at all. (The board glow is driven by the IsFocused parameter, not by DOM focus, so it does not cover this.) */ .wd-clue-input:focus { outline: none; } .wd-clue-input:focus + .wd-clue-tiles .wd-tile--draft { border-color: var(--wd-board-accent, #000); } .wd-clue-tiles { display: flex; justify-content: center; gap: 4px; width: 100%; } /* Sizing comes from .wd-tile, which the draft tiles also carry - this only adds the visual treatment, so draft and committed tiles stay the same width. */ .wd-tile--draft { display: flex; align-items: center; justify-content: center; height: 36px; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 4px; font-weight: 600; } @media (max-width: 959.98px) { .wd-tile--draft { height: 44px; } } /* ---------- Chip sets, lobby, app bar ---------- */ .wd-chipset { display: flex; justify-content: center; flex-wrap: wrap; } .wd-lobby-players { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; } @media (max-width: 959.98px) { .wd-appbar-title { display: none; } .wd-lobby-players .mud-typography-h3 { font-size: 1.5rem; } }