/* Ability mode — the board's one icon, and the slot round below it. The panel borrows .skin-panel's shape wholesale (own card, own heading, so it reads as a new question rather than a repeat of the guess form that just disappeared) and differs in what it holds: five fixed buttons instead of a text box, because the answer space is P/Q/W/E/R and never anything else. The board rules are here rather than in board.css because they are the opposite of what that file is for. Splash art is 1215x717 and wants the full width; an ability icon is 64x64 and would be a blurred smear at that size, so it is capped small and pixel-snapped instead. */ /* Sharp, not smoothed. The browser's default bilinear upscale turns a 64px icon into mush, which reads as the game hiding something — it is not, the picture is whole, and it should look it. 128px is exactly 2x the 64px source, so every source pixel becomes a clean 2x2 block with nothing interpolated. Keep any future size on that ladder (64/128/192/256) — a width that is not a whole multiple puts pixelated rendering back to uneven block sizes, which looks like a rendering bug rather than a deliberate style. */ body[data-mode="ability"] #splashImg { width: 128px; max-width: 60vw; height: auto; image-rendering: pixelated; border-radius: var(--radius-md); } /* The frame reserves its own height so the page does not jump when the icon lands. Matched to the width above. */ body[data-mode="ability"] #splashWrap { min-height: 128px; display: flex; align-items: center; justify-content: center; } .ability-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 24px; box-shadow: var(--shadow-md); } .ability-heading { font-family: 'Rajdhani', sans-serif; font-size: var(--text-xl); letter-spacing: var(--tracking-caps-lg); text-transform: uppercase; margin: 0 0 6px; } .ability-status { color: var(--text-muted); font-size: var(--text-md); margin-bottom: 12px; /* Reserved whether or not there is a message, so the buttons below do not jump a line every time the status clears. */ min-height: 1.4em; } .ability-result { color: var(--success); font-size: var(--text-lg); font-weight: 600; margin: 0; } /* direction:ltr on the CONTAINER, not just the buttons. These five are a keyboard row, not prose — P Q W E R is the order the keys sit under your hand, and it is the same order in every League client. On the three RTL pages the row inherited dir="rtl" from and laid itself out right-to-left, so P came out on the right and the sequence read backwards against the keyboard it names. Setting it on the buttons alone does not fix that: it governs the text inside each button, not the flex main axis. */ .ability-slots { display: flex; direction: ltr; gap: 8px; margin-bottom: 12px; } /* Square, equal, and wide enough to hit on a phone. flex:1 rather than a fixed width so five of them fill the panel at any width without a media query — there is no arrangement of five short labels that needs to reflow. Kept in Latin script and left-to-right even on the RTL pages: these are keyboard keys, and QWER is the same physical row in every League client. */ .ability-slot { flex: 1; min-width: 0; direction: ltr; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-none); letter-spacing: var(--tracking-caps-md); padding: 14px 0; cursor: pointer; transition: background var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); } .ability-slot:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--accent); } .ability-slot:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Spent, not merely busy. A slot already guessed stays visibly out of play for the rest of the round — the point of the round is which of five it is, so crossing off the ones you have spent is the whole scoreboard. Distinguished from the transient disabled state during a request by the class, not by :disabled, which both share. */ .ability-slot.is-spent { background: transparent; border-color: var(--border); color: var(--text-faint); cursor: not-allowed; text-decoration: line-through; } /* Outlined rather than filled, matching #giveUpBtn on the guess form: clearly the way out without competing with the slots for attention. */ #abilityGiveUpBtn { background: transparent; border: 1px solid var(--danger); color: var(--danger); } #abilityGiveUpBtn:hover:not(:disabled) { background: var(--danger); color: var(--text); }