/* ============================================================
   game.css, the game shell around the canvas and the HTML question layer
   ============================================================
   Inside the canvas everything is four shades drawn by the engine. This file styles
   the housing (shell, canvas scaling, d-pad and A/B pad, copied from kemy's
   css/style.css) and the question layer (#q-layer), which is plain HTML on
   bloom's css/base.css tokens: prompts, choices, worked examples and the numpad
   never render on the canvas. Load css/base.css first. */

:root {
  --shell: #2b2b2b;
  --screen-bg: #f7f7ef;
  --case: #d8d5cc;
  --case-dark: #a9a69c;
  --case-ink: #2a2a26;
}

/* 08/11/26: the housing (case, bezel, buttons around the screen) is css/console.css; the screen is always a fixed 16:9 box that
   holds the canvas and the question layer at the logical 640x360 size (2x the 320x180 view), scaled as one. */
.game-shell { touch-action: manipulation; }

/* The stage is the positioning context for the question overlay, so #q-layer sits
   exactly over the canvas area. Integer upscaling is set on the canvas by JS
   (width/height in whole multiples of 160x144); this rule only guarantees it never
   smooths and never overflows its bezel. */
.game-stage { position: absolute; }

#screen {
  display: block;
  background: var(--screen-bg);
  /* Never let the browser smooth the upscale. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  height: auto;
}

/* --- Controls (copied from kemy css/style.css) ----------------------- */

.pad {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6px 24px;
  padding: 4px 4px 0;
}

/* Capture and Home: two small pills, one below the d-pad and one below the diamond, like the Joy-Cons. */
.pad__cap, .pad__home { display: flex; justify-content: center; }
.pad__pill {
  position: relative;
  min-width: 78px;
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: 13px;
  background: #3a3a38;
  color: #d9d6cc;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 2px 0 #1c1c1a;
}
.pad__pill::after { content: attr(data-key); margin-left: 6px; color: #ffd84d; }
.pad__pill.is-pressed { transform: translateY(2px); box-shadow: none; background: #222220; }

/* The keyboard letter printed small on each button (W A S D, K, J, I, U, N, C). */
.dpad__btn::before {
  content: attr(data-key);
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}
.actions__btn { position: relative; }
.actions__btn::after {
  content: attr(data-key);
  position: absolute;
  right: 7px;
  bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-soft, #5b5b58);
  box-shadow: none;
}

/* 46px minimum: the pad is the primary control on a tablet, and ~44px is what a
   thumb hits reliably. */
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(3, 46px);
}

.dpad__btn,
.dpad__hub {
  background: #3a3a38;
  border: none;
  padding: 0;
}

.dpad__hub { grid-area: 2 / 2; }

.dpad__btn { cursor: pointer; position: relative; }

.dpad__btn::after {
  content: "";
  position: absolute;
  inset: 34%;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 1px;
}

.dpad__btn--up { grid-area: 1 / 2; border-radius: 6px 6px 0 0; }
.dpad__btn--left { grid-area: 2 / 1; border-radius: 6px 0 0 6px; }
.dpad__btn--right { grid-area: 2 / 3; border-radius: 0 6px 6px 0; }
.dpad__btn--down { grid-area: 3 / 2; border-radius: 0 0 6px 6px; }
.dpad__btn.is-pressed { background: #222220; }

.actions {
  display: grid;
  grid-template-areas: ". x ." "y . a" ". b .";
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(3, 46px);
  gap: 0;
  justify-items: center;
  align-items: center;
}
.actions__btn[data-btn="x"] { grid-area: x; }
.actions__btn[data-btn="y"] { grid-area: y; }
.actions__btn[data-btn="a"] { grid-area: a; }
.actions__btn[data-btn="b"] { grid-area: b; }

/* none, not manipulation: on the controls a press must never start a pan or zoom,
   which cancels the pointer stream and loses the press. */
.dpad__btn,
.actions__btn { touch-action: none; }

.actions__btn {
  display: inline-grid;        /* centre the glyph: the UA button padding plus the inherited
                                  line-height sat the letter low and left (Myron, 03/10/26) */
  place-items: center;
  padding: 0;
  line-height: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: #8c2f4a;
  color: #ffe9f0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;           /* trailing tracking space pushed the glyph off centre */
  cursor: pointer;
  box-shadow: 0 3px 0 #5e1e31;
}

.actions__btn.is-pressed {
  transform: translateY(3px);
  box-shadow: 0 0 0 #5e1e31;
}

/* --- Question layer ---------------------------------------------------
   Absolute over the canvas area (.game-stage), bloom tokens only. Hidden until a
   question opens; the game sets `locked` while it is shown. */

#q-layer {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 10px;
  user-select: none;
}

#q-layer[hidden] { display: none; }
/* An empty feedback or hint slot takes no row (and no gap) until it has something to say. */
#q-layer .q-flash:empty, #q-layer .q-hints:empty { display: none; }

#q-layer .prompt { font-size: 1.25rem; font-weight: 700; }
#q-layer .prompt.small { font-size: 1.05rem; }
#q-layer .q-answer { margin-top: auto; }

/* Two columns where the item has a picture (v0.6 U4b): the picture in a 300 px left column, prompt, goal, hints and answers on the right. */
#q-layer[data-cols="2"] { flex-direction: row; gap: 14px; }
#q-layer .q-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#q-layer .q-col-pic { flex: 0 0 300px; width: 300px; align-items: center; justify-content: flex-start; }
#q-layer .q-col-main { flex: 1 1 0; }
/* The 294 px right column carries a long prompt, the goal strip and a numpad: its level 0 look is the compact one so the fit ladder stays idle. */
#q-layer[data-cols="2"] { padding: 10px 14px; }
#q-layer[data-cols="2"] .q-col-main { gap: 6px; }
#q-layer[data-cols="2"] .prompt { font-size: 1.1rem; line-height: 1.25; }
#q-layer[data-cols="2"] .prompt.small { font-size: 1rem; }
#q-layer[data-cols="2"] .q-goal { padding: 4px 10px; font-size: 0.9rem; }
#q-layer[data-cols="2"] .answer-display { min-height: 40px; font-size: 1.5rem; margin-bottom: 0; }
#q-layer[data-cols="2"] .numpad { gap: 6px; }
#q-layer[data-cols="2"] .numpad button.key { min-height: 38px; font-size: 1.3rem; }
#q-layer .q-col-pic .rep-host, #q-layer .q-col-pic .barmodel { margin: 0; max-width: 100%; }

#q-layer .choices { display: flex; flex-direction: column; gap: 10px; }

#q-layer button {
  font: inherit;
  color: var(--ink);
  background: var(--leaf-soft);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  min-height: 48px;
  padding: 10px 16px;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

#q-layer .btn-primary { background: var(--leaf); color: #fff; }
#q-layer .choices button.picked-right { background: var(--leaf); color: #fff; }
#q-layer .choices button.picked-wrong { background: var(--berry-soft); color: var(--berry); }
#q-layer button:disabled { opacity: 0.6; cursor: default; }

/* The d-pad focus ring: the single "where am I" cue for every menu and choice. */
.is-focused {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

#q-layer .hint-bubble {
  background: var(--sun-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

#q-layer .feedback-flash { font-weight: 700; }
#q-layer .feedback-flash.good { color: var(--leaf-deep); }
#q-layer .feedback-flash.retry { color: var(--sky); }
#q-layer .feedback-flash.nudge { color: var(--sky); }
#q-layer .feedback-flash.shown { color: var(--berry); }

/* Numpad: a 4 column grid, each key placed on its own row and column so a
   filtered-out symbol leaves a gap instead of reflowing the digits. */
#q-layer .answer-display {
  font-size: 2rem;
  font-weight: 800;
  min-height: 54px;
  padding: 4px 14px;
  overflow-wrap: anywhere;
  word-break: break-all;
  min-width: 0;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  margin-bottom: 8px;
}
#q-layer .answer-display.filled { border-color: var(--leaf); }

.numpad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#q-layer .numpad button.key {
  text-align: center;
  font-size: 1.4rem;
  min-height: 48px;
  padding: 6px;
}
#q-layer .numpad .key-ok { background: var(--leaf); color: #fff; }
#q-layer .numpad .key-util { background: var(--sky-soft); color: #265f99; }

/* Worked examples inside the layer reuse the same controls. */
#q-layer .we-shown { background: var(--sky-soft); border-radius: var(--radius-sm); padding: 10px 14px; }
#q-layer .we-ask { font-weight: 700; }

/* There is no phone breakpoint any more (08/11/26): the question layer is always laid over the 640x360 screen, never in the page flow. */

@media (prefers-reduced-motion: reduce) {
  .actions__btn.is-pressed { transform: none; }
}

/* Trophy, wardrobe, badge and ferry screens (chunk 6): read-only rows, cards, locked entries. */
#q-layer .q-info { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
#q-layer .q-line { padding: 6px 10px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); }
#q-layer .q-line.tier-bronze { border-left: 6px solid #b9803f; }
#q-layer .q-line.tier-silver { border-left: 6px solid #9aa4ad; }
#q-layer .q-line.tier-gold { border-left: 6px solid var(--sun); }
#q-layer .q-line.tier-none { color: var(--ink-soft); }
#q-layer button.q-card { display: flex; flex-direction: column; gap: 2px; }
#q-layer .q-goal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--leaf-soft); font-size: 0.95rem; line-height: 1.3; flex: none; }
#q-layer .q-goal-line { font-weight: 700; }
#q-layer .q-goal-now { color: var(--ink-soft); }
#q-layer .q-goal[data-goal-word="on"] .q-goal-now, #q-layer .q-goal[data-reaction="cheer"] .q-goal-now { color: var(--ink); font-weight: 700; }
#q-layer canvas.q-scene { width: 100%; max-width: 300px; align-self: center; image-rendering: pixelated; flex: none; border: 2px solid var(--line); border-radius: var(--radius-sm); }
#q-layer button.q-done { align-self: center; background: var(--leaf); color: #fff; text-align: center; min-width: 120px; }
#q-layer canvas.q-pic { width: 100%; max-width: 300px; height: auto; align-self: center; image-rendering: pixelated; flex: none; border: 2px solid var(--line); border-radius: var(--radius-sm); }

/* Fit levels (js/game/q-fit.js, npfix 08/11/26): when a question is taller than the screen frame the layer
   steps down through these, cumulative (data-fit="1 2" carries level 1 and 2), until every control is inside. */
#q-layer[data-fit~="1"] { gap: 6px; padding-top: 10px; padding-bottom: 10px; }
#q-layer[data-fit~="1"] .q-goal { padding: 4px 10px; }
#q-layer[data-fit~="1"] .prompt { font-size: 1.1rem; line-height: 1.25; }
#q-layer[data-fit~="1"] .prompt.small { font-size: 1rem; }
#q-layer[data-fit~="1"] .q-goal { font-size: 0.9rem; }
#q-layer[data-fit~="1"] .q-col { gap: 6px; }
#q-layer[data-fit~="1"] .answer-display { min-height: 44px; font-size: 1.6rem; margin-bottom: 4px; }
#q-layer[data-fit~="1"] .numpad { gap: 6px; }
#q-layer[data-fit~="1"] .numpad button.key { min-height: 42px; }
#q-layer[data-fit~="1"] .choices { gap: 6px; }
#q-layer[data-fit~="1"] button { min-height: 42px; padding: 6px 12px; }
#q-layer[data-fit~="1"] canvas.q-scene { max-width: 288px; }
#q-layer[data-fit~="1"] canvas.q-pic { max-width: 192px; }
/* level 1 of a two-column layer: a narrower picture column gives the prompt a wider one (fewer lines), and the numpad tightens a little. */
#q-layer[data-fit~="1"][data-cols="2"] .q-col-pic { flex-basis: 250px; width: 250px; }
#q-layer[data-fit~="1"][data-cols="2"] .prompt { font-size: 1rem; }
#q-layer[data-fit~="1"][data-cols="2"] .answer-display { min-height: 36px; font-size: 1.4rem; }
#q-layer[data-fit~="1"][data-cols="2"] .numpad button.key { min-height: 34px; font-size: 1.2rem; }
#q-layer[data-fit~="1"][data-cols="2"] .numpad { gap: 4px; }
#q-layer[data-fit~="1"][data-cols="2"] .prompt { line-height: 1.2; }
#q-layer[data-fit~="1"][data-cols="2"] .q-goal { padding: 2px 8px; }
#q-layer[data-fit~="1"][data-cols="2"] .q-col-main { gap: 4px; }
#q-layer[data-fit~="2"] { line-height: 1.25; }
#q-layer[data-fit~="2"] .prompt { font-size: 1.05rem; }
#q-layer[data-fit~="2"] .prompt.small { font-size: 0.95rem; }
#q-layer[data-fit~="2"] .answer-display { min-height: 38px; font-size: 1.4rem; padding: 2px 12px; }
#q-layer[data-fit~="2"] .numpad button.key { min-height: 36px; font-size: 1.2rem; padding: 4px; }
#q-layer[data-fit~="2"] button { min-height: 36px; }
#q-layer[data-fit~="2"] .rep-host { zoom: 0.8; }
#q-layer[data-fit~="2"] canvas.q-scene { max-width: 224px; }
#q-layer[data-fit~="2"] canvas.q-pic { max-width: 160px; }
#q-layer[data-fit~="3"] { gap: 4px; padding: 8px 10px; }
#q-layer[data-fit~="3"] .prompt { font-size: 0.95rem; }
#q-layer[data-fit~="3"] .prompt.small { font-size: 0.9rem; }
#q-layer[data-fit~="3"] .answer-display { min-height: 34px; font-size: 1.25rem; }
#q-layer[data-fit~="3"] .numpad { gap: 4px; }
#q-layer[data-fit~="3"] .numpad button.key { min-height: 32px; }
#q-layer[data-fit~="3"] button { min-height: 32px; padding: 4px 10px; }
#q-layer[data-fit~="3"] .rep-host { zoom: 0.65; }
#q-layer[data-fit~="3"] canvas.q-scene { max-width: 176px; }
#q-layer[data-fit~="3"] canvas.q-pic { max-width: 128px; }
#q-layer[data-fit~="4"] .prompt, #q-layer[data-fit~="4"] .prompt.small { font-size: 0.85rem; }
#q-layer[data-fit~="4"] .numpad button.key, #q-layer[data-fit~="4"] button { min-height: 28px; }
#q-layer[data-fit~="4"] .answer-display { min-height: 30px; }
#q-layer[data-fit~="4"] .rep-host { zoom: 0.5; }
#q-layer[data-fit~="4"] canvas.q-scene { max-width: 144px; }
#q-layer[data-fit~="4"] canvas.q-pic { max-width: 112px; }
#q-layer canvas.q-art { width: 96px; height: 96px; align-self: center; image-rendering: pixelated; flex: none; }
#q-layer button.q-card .q-sub { font-weight: 400; color: var(--ink-soft); }
#q-layer button.is-dim { opacity: 0.55; background: var(--card); border-color: var(--line); }

/* Representation visuals the question layer still needs (moved from the retired css/session.css, 03/10/26). */
.barmodel { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.bm-bar-row { width: 100%; max-width: 320px; height: 40px; display: block; margin: 0 auto; }
.bm-seg { fill: var(--leaf-soft); stroke: var(--leaf-deep); stroke-width: 2; }
.bm-seg-unknown { fill: var(--sun-soft); stroke: var(--sun); stroke-dasharray: 5 4; }
.bm-seg-label { fill: var(--ink); font-size: 11px; font-weight: 800; text-anchor: middle; }
.bm-brace { text-align: center; font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; }

/* ============ Visual representations (js/content/representations.js) ============ */

.rep-host { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 10px; }
.rep-svg { max-width: 100%; }
.rep-caption { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); text-align: center; }

/* number bonds */
.rep-numberbond { width: 220px; height: 130px; }
.nb-bond { stroke: var(--ink-soft); stroke-width: 2.5; }
.nb-circle circle { fill: var(--sky-soft); stroke: var(--sky); stroke-width: 3; }
.nb-circle.nb-whole circle { fill: var(--leaf-soft); stroke: var(--leaf-deep); }
.nb-circle.nb-missing circle { fill: var(--sun-soft); stroke: var(--sun); stroke-dasharray: 6 4; }
.nb-value { fill: var(--ink); font-size: 20px; font-weight: 800; text-anchor: middle; }

/* arrays / equal groups / combination */
.rep-array-wrap, .rep-groups-row, .rep-combination-grid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rep-groups-row { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.rep-array { width: 200px; }
.arr-cell { fill: var(--leaf-soft); stroke: var(--leaf-deep); stroke-width: 1.5; }
.arr-dot { fill: var(--sky); }
.rep-group-ring svg { width: 48px; height: 48px; }
.rep-share-ring { width: 40px; height: 40px; }
.share-ring { fill: var(--sun-soft); stroke: var(--sun); stroke-width: 2.5; stroke-dasharray: 5 3; }
.share-q { fill: #7a5a12; font-size: 16px; font-weight: 800; text-anchor: middle; }
.rep-combination-grid { width: 220px; }
.combo-col-icon { fill: var(--sun); }
.combo-row-icon { fill: var(--berry); }
.combo-cell rect { fill: var(--sky-soft); stroke: var(--sky); stroke-width: 1.5; }

/* fraction bar / circle */
.rep-fracbar-wrap { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
.rep-fracbar { width: 100%; max-width: 280px; height: 46px; }
.fb-slice { fill: var(--card); stroke: var(--line); stroke-width: 2; }
.fb-shaded { fill: var(--leaf); stroke: var(--leaf-deep); }
.fb-unknown { fill: #7a5a12; font-size: 18px; font-weight: 800; text-anchor: middle; }
.fb-caption { fill: var(--ink-soft); font-size: 11px; font-weight: 700; text-anchor: middle; }
.rep-fraccircle-wrap { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.rep-fraccircle-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rep-fraccircle { width: 92px; height: 92px; }
.fc-outline { fill: var(--card); stroke: var(--line); stroke-width: 2; }
.fc-slice { fill: transparent; }
.fc-shaded { fill: var(--leaf); }
.fc-line { stroke: var(--line); stroke-width: 1.5; }

/* place value discs */
.rep-pv-wrap { display: flex; gap: 10px; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.rep-pv-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rep-pv-discs { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 90px; }
.rep-disc { width: 28px; height: 28px; }
.pv-disc-circle { fill: var(--sky-soft); stroke: var(--sky); stroke-width: 2.2; }
.pv-disc-label { fill: var(--ink); font-size: 10px; font-weight: 800; text-anchor: middle; }
.pv-multi-badge { fill: var(--berry); font-size: 11px; font-weight: 800; text-anchor: middle; }
.rep-disc.pv-empty .pv-disc-circle { fill: transparent; stroke: var(--line); stroke-dasharray: 3 3; }
.pv-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* clocks */
.rep-clocks-wrap { display: flex; align-items: center; gap: 12px; justify-content: center; }
.rep-clock-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rep-clock { width: 88px; height: 88px; }
.clk-face { fill: var(--card); stroke: var(--line); stroke-width: 2.5; }
.clk-tick { stroke: var(--ink-soft); stroke-width: 1.5; }
.clk-hour { stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.clk-min { stroke: var(--sky); stroke-width: 2.2; stroke-linecap: round; }
.clk-pin { fill: var(--ink); }
.rep-clock-arrow { font-size: 1.3rem; color: var(--ink-soft); font-weight: 800; }

/* money */
.rep-money-wrap { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.rep-money-col { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 220px; }
.rep-money-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.rep-note { width: 52px; height: 24px; }
.note-1000 { fill: var(--sky); } .note-500 { fill: var(--leaf); } .note-200 { fill: var(--sun); }
.note-label { fill: #fff; font-size: 11px; font-weight: 800; text-anchor: middle; }
.rep-coin { width: 28px; height: 28px; }
.coin-100 { fill: var(--sun); } .coin-50 { fill: var(--sun-soft); stroke: var(--sun); stroke-width: 1.5; }
.coin-20 { fill: var(--leaf-soft); stroke: var(--leaf-deep); stroke-width: 1.5; }
.coin-10 { fill: var(--sky-soft); stroke: var(--sky); stroke-width: 1.5; }
.coin-5 { fill: var(--line); stroke: var(--ink-soft); stroke-width: 1.5; }
.coin-label { fill: var(--ink); font-size: 9px; font-weight: 800; text-anchor: middle; }

/* measurement comparison */
.rep-measure-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }
.rep-measure-bar { width: 100%; height: 24px; }
.ms-track { fill: var(--line); }
.ms-fill { fill: var(--sky); }
.ms-label { fill: var(--ink); font-size: 11px; font-weight: 800; }

.game-links { text-align: center; font-size: 0.85rem; margin: 10px 0 0; }

/* Arcade Hut cabinet grid (hutfix 09/11/26): two columns, a locked cabinet's price on its own line, so nine pills fit without wrapping out of the pill. */
#q-layer .choices.q-grid { display: grid; gap: 6px; align-items: stretch; }
#q-layer .choices.q-grid button { min-height: 36px; padding: 4px 10px; overflow: hidden; line-height: 1.2; }
#q-layer:has(.q-grid) .q-info { flex: none; flex-direction: row; gap: 6px; overflow: visible; }
#q-layer:has(.q-grid) .q-info .q-line { flex: 1 1 0; padding: 3px 10px; }
#q-layer .choices.q-grid button .q-sub { font-size: 0.8em; }