/* Unit 6 page extras. Only things site.css does not already provide. */
.u6-table { overflow-x: auto; max-width: 100%; }
.u6-table table { border-collapse: collapse; min-width: 16rem; }
.u6-table th, .u6-table td { border: 1px solid rgba(127,127,127,0.35); padding: 0.35rem 0.6rem; text-align: left; }
.u6-fig { display: block; max-width: 100%; height: auto; margin: 0.5rem auto; }
.u6-fig text { fill: currentColor; font: 14px system-ui, sans-serif; }
.u6-topics { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.u6-topics li { border: 1px solid rgba(127,127,127,0.35); border-radius: 10px; padding: 0.75rem 1rem; }
.u6-topics a { font-weight: 600; font-size: 1.05em; }
.u6-frq ol[type="a"] li { margin-bottom: 0.4rem; }

/* games */
.game { border: 1px solid rgba(127,127,127,0.35); border-radius: 12px; padding: 1rem; margin: 1.25rem 0; }
.game canvas { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px;
  background: rgba(127,127,127,0.08); touch-action: manipulation; }
.game-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0.5rem 0; font-weight: 600; }
.game-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.6rem 0; }
.game-row label { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.game-row input[type="range"] { width: min(260px, 70vw); min-height: 44px; }
.game-row input[type="number"] { width: 6.5rem; min-height: 44px; font-size: 1rem; }
.game button { min-height: 44px; min-width: 44px; padding: 0.4rem 0.9rem; font-size: 1rem; border-radius: 8px;
  border: 1px solid rgba(127,127,127,0.5); background: rgba(127,127,127,0.12); color: inherit; cursor: pointer; }
.game button.pick[aria-pressed="true"] { outline: 3px solid var(--v, #1f9d55); }
.game button:disabled { opacity: 0.5; cursor: default; }
.game-msg { min-height: 1.6em; font-weight: 600; }
.game-msg.good { color: var(--v, #1f9d55); }
.game-msg.bad { color: var(--a, #e07b00); }
.sim .pe-dist[hidden] { display: none !important; }

/* inline trap callouts (TRAPS_FRQ_SPEC) */
.callout.trap { background: var(--warnbg, #fff6e0); border-left-color: var(--warn, #92400e); }
.callout.trap > b:first-of-type { color: var(--warn, #92400e); }