/*! Copyright 2026 El Trivia (eltrivia.com). All rights reserved. */
.q-elements{padding-block:var(--s5) var(--s7)}.q-elements__intro{display:grid;gap:var(--s2);margin-bottom:var(--s5);max-width:60ch}.q-elements__intro h1{font-size:28px}.q-elements__game{display:grid;gap:var(--s3);max-width:none;padding:var(--s2)}.q-elements__game:focus{outline:none}.q-elements__bar{background:var(--surface);border-radius:var(--r-card) var(--r-card) 0 0;display:grid;gap:var(--s2);margin:calc(var(--s2)*-1) calc(var(--s2)*-1) 0;padding:var(--s3);position:sticky;top:0;z-index:4}.q-elements__row{align-items:center;display:flex;flex-wrap:wrap;gap:var(--s4)}.q-elements__actions{display:flex;gap:var(--s2);margin-left:auto}.q-elements__input{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink);font-size:18px;min-height:48px;padding:0 var(--s4);width:100%}.q-elements__input:disabled{opacity:.5}.q-elements__feedback{font-size:15px;margin-top:var(--s1);min-height:1.5em;overflow:hidden;padding-inline:var(--s4);text-overflow:ellipsis;white-space:nowrap}.q-elements__result{display:grid;gap:var(--s3);padding:var(--s2)}.q-elements__result .fig dd{font-size:24px}.q-elements__board{display:grid;gap:var(--s4);min-width:0;position:relative}.q-elements__table{container-type:inline-size;min-width:0}.q-elements__grid{--gap:1px;--cell:calc(100cqi/18 - var(--gap)*17/18);display:grid;gap:var(--gap);grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(7,auto) calc(var(--cell)/3) repeat(2,auto)}.q-elements__cell{align-items:center;aspect-ratio:1;background:var(--surface-2);border-radius:2px;display:flex;flex-direction:column;font-variant-numeric:tabular-nums;justify-content:center;line-height:1;min-width:0;overflow:hidden;text-align:center}.q-elements__cell.state{background:var(--st);color:#fff}.q-elements__cell.is-missed{box-shadow:inset 0 0 0 2px var(--st),inset 0 0 0 3px hsla(0,0%,100%,.6)}.q-elements__range{background:none;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-2);padding-inline:1px}.q-elements__rng{font-size:calc(var(--cell)*.26);font-weight:600;overflow-wrap:anywhere}.q-elements__sym{font-size:calc(var(--cell)*.6);font-weight:700}.q-elements__name,.q-elements__z{display:none}@container (min-width: 560px){.q-elements__grid{--gap:2px}.q-elements__cell{border-radius:4px}.q-elements__z{display:block;font-size:calc(var(--cell)*.22)}.q-elements__sym{font-size:calc(var(--cell)*.4);margin-top:2px}.q-elements__rng{font-size:calc(var(--cell)*.22)}}@container (min-width: 840px){.q-elements__cell{aspect-ratio:6/5;padding-inline:2px}.q-elements__z{font-size:calc(var(--cell)*.17)}.q-elements__sym{font-size:calc(var(--cell)*.3);margin-top:1px}.q-elements__name{display:block;font-size:calc(var(--cell)*.15);font-stretch:75%;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.q-elements.is-tinted .q-elements__cell.is-guessed.tone-field,.q-elements__chip.tone-field{background:var(--field);color:var(--on)}.q-elements.is-tinted .q-elements__cell.is-guessed.tone-light,.q-elements__chip.tone-light{background:var(--light);color:var(--deep)}.q-elements.is-tinted .q-elements__cell.is-guessed.tone-none,.q-elements__chip.tone-none{background:var(--state-absent);color:#fff}.q-elements__legend{display:grid;gap:var(--s2)}.q-elements__legend ul{display:grid;font-size:14px;gap:var(--s1) var(--s4);grid-template-columns:repeat(auto-fill,minmax(190px,1fr));list-style:none;margin:0;padding:0}.q-elements__legend li{align-items:center;display:flex;gap:var(--s2)}.q-elements__legend p{font-size:13px}.q-elements__chip{border-radius:3px;flex:none;height:16px;width:16px}.q-elements__chip.is-missed{box-shadow:inset 0 0 0 2px var(--st),inset 0 0 0 3px hsla(0,0%,100%,.6)}.q-elements__grid.is-revealed .q-elements__cell{cursor:pointer}.q-elements__cell.is-selected{outline:2px solid var(--ink);outline-offset:1px;position:relative;z-index:1}.q-elements__caption{font-size:15px;min-height:1.5em}.q-elements__option{align-items:center;cursor:pointer;display:flex;font-size:15px;gap:var(--s3);min-height:44px}.q-elements__option input{accent-color:var(--ink);height:20px;margin:0;width:20px}.q-elements__list{border-top:1px solid var(--line);min-width:0}.q-elements__listtable{border-collapse:collapse;font-size:15px;width:100%}.q-elements__listtable thead th{color:var(--ink-2);font-size:12px;font-weight:600;padding:var(--s2);text-align:left}.q-elements__listtable td{border-bottom:1px solid var(--line);height:36px;padding:6px var(--s2)}.q-elements__listtable td:first-child,.q-elements__listtable th:first-child{color:var(--ink-2);width:3.5em}.q-elements__listtable td:nth-child(2),.q-elements__listtable th:nth-child(2){font-weight:600;width:5em}.q-elements__listtable th[scope=rowgroup]{font-size:15px;font-weight:700;padding:var(--s4) var(--s2) var(--s2);text-align:left}.q-elements__missed td{color:var(--state-wrong);font-style:italic}.q-elements__pause{align-content:center;inset:0;padding:var(--s4)}.q-elements__pause p{font-size:18px}.q-elements.is-paused .q-elements__list,.q-elements.is-paused .q-elements__table{visibility:hidden}.q-elements__stats{display:grid;gap:var(--s4);margin-top:var(--s5);max-width:none;padding:var(--s4)}.q-elements__stats .figs{grid-template-columns:repeat(3,minmax(0,1fr))}.q-elements__stats .fig dd{font-size:24px}.q-elements__recent{overflow-x:auto}.q-elements__recent caption{padding-bottom:var(--s2);text-align:left}.q-elements__recent td:first-child,.q-elements__recent th:first-child{color:inherit;width:auto}.q-elements__recent td:nth-child(2),.q-elements__recent th:nth-child(2){font-weight:400;width:auto}.q-elements__about{display:grid;gap:var(--s3);margin-top:var(--s7);max-width:72ch}.q-elements__about h2{margin-top:var(--s4)}.q-elements__about ol,.q-elements__about ul{display:grid;gap:var(--s1);margin:0;padding-left:1.4em}.q-elements__about h3{margin-top:var(--s2)}.q-elements__more{display:grid;gap:var(--s3)}.q-elements__more summary{cursor:pointer;font-weight:600;padding-block:10px}.q-elements__more[open] summary{margin-bottom:var(--s2)}.q-elements__about .q-elements__names thead th{position:static}@media (min-width:720px){.q-elements__game{gap:var(--s4);padding:var(--s4)}.q-elements__bar{margin:calc(var(--s4)*-1) calc(var(--s4)*-1) 0;padding:var(--s4)}}@media (min-width:900px){.q-elements__game{padding:var(--s5)}.q-elements__bar{margin:0;padding:0;position:static}.q-elements__list{max-height:50vh;overflow-y:auto;overscroll-behavior:contain}.q-elements__listtable thead th{background:var(--surface);position:sticky;top:0;z-index:1}}