/* MasterArabic — editorial workspace refinement.
   Design-taste-frontend: editorial-greeting, seed 190107049.
   Presentation only. All text, game data, interactions and print styles are retained.
   Grid: 12 flexible columns with a 16px gutter; each group spans the same canvas.
   On a 1100px canvas: 12 × 77px + 11 × 16px = 1100px. */
@media screen {
  :root {
    --ink:#193c33; --muted:#566a61; --green:#175747;
    --paper:#f4f7f5; --sage:#eaf1ed; --line:#dfe7e2;
    --orange:#175747; --radius:12px;
    --workspace-gap:16px; --canvas-gutter:32px;
  }
  body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.55;color:var(--ink);background:var(--paper)}
  button,a,input,select,textarea {touch-action:manipulation}
  button {transition:background-color .16s,border-color .16s,transform .16s;}
  button:hover {filter:none}
  button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:3px solid #2169a1;outline-offset:3px}
  button:disabled {opacity:.58}
  button,input,select,textarea {font-variant-numeric:tabular-nums}
  input::placeholder,textarea::placeholder {color:#62736a;opacity:1}
  .sidebar {width:224px;padding:28px 16px 20px;background:#f4f7f5;border-right:1px solid var(--line);overflow-y:auto;gap:2px}
  .brand {padding:0 8px;gap:6px;margin-bottom:24px}
  .brand-logo {width:174px;height:auto}
  .brand>small {font-size:10px;letter-spacing:1px;color:#566a61;line-height:1.6}
  .side-caption {margin:8px 12px 14px;font-size:10px;letter-spacing:.8px;color:#52665c}
  .side-link,.side-link#physicalCardsNav {font-size:13px;line-height:1.4;min-height:44px;padding:10px 12px;gap:9px;margin:0 0 3px;border-radius:7px;color:#42594e;white-space:normal}
  .side-link>span {font-size:18px;min-width:20px;color:#526a5e}
  .side-link b {background:#e4eae6;color:#405c4c;font-size:11px;font-weight:500;padding:2px 6px;border-radius:4px;flex-shrink:0}
  .side-link.active {background:#e3eae5;color:#183e30;font-weight:650}
  .side-link:hover {background:#e8eee9}
  .side-note {margin:24px 8px 20px;padding:18px 0 0;background:transparent;border:0;border-top:1px solid #dce5de;border-radius:0}
  .note-star {font-size:24px;color:var(--green)}
  .side-note h3 {font:23px/1.2 Georgia,serif;margin:12px 0}
  .side-note p {font-size:13px;line-height:1.7;color:#52665a}
  .note-ar {font-size:27px;color:#55765f;margin:12px 0}
  .side-link.bottom {margin-top:auto;padding-top:12px;font-size:12px}
  .side-foot {font-size:9px;letter-spacing:.25px;line-height:1.9;color:#56695c;padding:12px 12px 0}
  .app {margin-left:224px;min-width:0}
  header {height:64px;padding:0 var(--canvas-gutter);background:transparent;border:0}
  .breadcrumb,.header-right {font-size:12px;color:#56685e}
  .breadcrumb b {color:#193c33;font-weight:600}
  .breadcrumb span {padding:0 9px}
  .avatar {border-color:#d3ded5;background:#e5ece6;color:#234f3d;width:34px;height:34px;font:600 12px Arial,sans-serif;margin-left:12px}
  main {max-width:1240px;padding:0 var(--canvas-gutter);min-width:0}
  .hero {display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;min-height:252px;padding:26px 0 30px;align-items:center}
  .hero>.eyebrow,.eyebrow {font-size:10px;letter-spacing:.6px;color:#516e5c;margin-bottom:12px;line-height:1.5}
  .hero h1 {font:400 clamp(30px,3vw,42px)/1.1 Georgia,serif;letter-spacing:-1.1px;max-width:680px;text-wrap:balance}
  .hero h1 em {font-style:normal;color:inherit}
  .hero-copy {font-size:14px;line-height:1.65;color:#4d6558;margin:16px 0;max-width:560px}
  .hero-copy .desktop {display:none}
  .hero-tags {font-size:11px;line-height:1.5;gap:8px 16px;flex-wrap:wrap;color:#46614f}
  .hero-tags span:first-child {color:#27513f}
  .hero-art {width:260px;height:214px;margin:0}
  .art-orbit {background:#e6eee7;border:0;border-radius:14px;width:226px;height:178px;top:13px;right:0}
  .art-card {box-shadow:none;border:0;border-radius:10px}
  .art-card.one {left:0;top:9px;width:158px;height:167px;background:#fff;transform:rotate(-5deg);gap:13px}
  .art-card.one small {font:10px Arial,sans-serif;letter-spacing:.5px;color:#4b6658}
  .art-card.one strong {font:43px/1.5 Georgia,serif}
  .art-card.one span {font:12px Arial,sans-serif;color:#506e59}
  .art-card.two {width:112px;height:128px;top:59px;right:0;transform:rotate(5deg);background:#d4e4d5}
  .art-card.two b {font-size:28px}
  .art-spark {font-size:30px;color:#416f53;right:8px;top:-10px;transform:none}
  .art-label {left:14px;bottom:0;font:12px/1.5 Georgia,serif;color:#4d6b57;transform:none}
  .packbar {border:1px solid #dbe5dd;border-radius:10px;background:#fff;box-shadow:none;gap:14px;padding:18px 20px;min-height:82px}
  .pack-icon {background:#eef3ef;border-radius:6px;color:#46654e}
  .packbar label {font-size:10px;color:#4c6456;letter-spacing:.6px;margin-bottom:7px}
  .packbar select {font-size:14px;font-weight:600;max-width:330px;min-height:28px;color:#1e4534}
  .pack-desc {font-size:12px;color:#556d5a;margin-left:auto;line-height:1.6}
  .text-button {font-size:13px;font-weight:600;line-height:1.5;padding:10px 0;color:var(--green)}
  .packbar .text-button {margin-left:6px}
  .handout-invite {margin:20px 0 30px;padding:22px 24px;gap:24px;background:#e9f0eb;border:0;border-radius:10px;align-items:center}
  .handout-invite h2 {font:25px/1.25 Georgia,serif;color:#203f30}
  .handout-invite p {font-size:13px;line-height:1.7;color:#46614f;margin:10px 0 0;max-width:700px}
  .handout-invite .eyebrow {font-size:10px;color:#476450;letter-spacing:.6px}
  .quiet,.secondary,.primary {min-height:40px;padding:9px 14px;border-radius:6px;font-size:13px;font-weight:550;line-height:1.4}
  .quiet {background:#fff;border-color:#d9e3dc;color:#2e503c}
  .secondary {background:#edf2ee;border-color:#d9e3dc;color:#294c38}
  .primary {background:var(--green);color:#fff;border-color:var(--green)}
  .quiet:hover,.secondary:hover {background:#e1eae3;border-color:#a9c3af}
  .primary:hover {background:#103f31;border-color:#103f31}
  .icon-button {min-width:40px;min-height:40px;border-radius:6px}
  .activities {margin-top:0}
  h2 {font-size:26px;line-height:1.25}
  .section-row {align-items:center;gap:24px}
  .section-row h2 {font:27px/1.25 Georgia,serif}
  .section-row h2 span {font:12px Arial,sans-serif;letter-spacing:0;background:#e7eee8;color:#34563d;border:0;white-space:nowrap;padding:5px 8px;border-radius:5px}
  .section-row p {font-size:13px;color:#536e5b;line-height:1.6;margin:9px 0}
  .search-wrap {border-color:#b8cbbd;border-radius:6px;min-height:44px;gap:8px;padding:9px 13px;flex-shrink:0}
  .search-wrap input {font-size:13px;width:166px;color:#254837;min-width:0}
  .search-wrap:focus-within {outline:2px solid #4a8566;outline-offset:2px}
  .search-wrap span {color:#4f705a}
  .filter-row {gap:6px;padding:18px 0 8px;flex-wrap:wrap}
  .filter {font-size:12px;line-height:1.4;min-height:38px;border:0;border-radius:5px;padding:9px 12px;background:transparent;color:#45634e}
  .filter:hover {background:#e1eae3}
  .filter.active {background:#deebe1;color:#1d4c31;font-weight:650;box-shadow:inset 0 -2px #3b7550}
  .game-group {margin:26px 0 34px}
  .group-heading {border:0;padding:14px 0 18px;gap:20px;align-items:center}
  .group-heading h3 {font:26px/1.2 Georgia,serif;margin:0 0 8px;color:#244432}
  .group-heading p {font-size:13px;line-height:1.6;color:#526b59}
  .group-heading>span {font-size:11px;letter-spacing:.2px;color:#4c6556;white-space:nowrap}
  .game-grid {gap:16px}
  .game-grid:has(>.game-card:nth-child(2):last-child),.game-grid:has(>.game-card:nth-child(4):last-child) {grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-card {border:1px solid #dce5df;border-radius:10px;background:#fff;box-shadow:none;min-width:0;transition:border-color .16s,transform .16s}
  .game-card:hover,.colorful-card:hover {border-color:#80a48b;box-shadow:none;transform:translateY(-2px)}
  .game-card:active {transform:translateY(0)}
  .colorful-card .thumb,.thumb {background:var(--tint);height:142px}
  .colorful-card .thumb:after,.thumb:before {content:none}
  .thumb-spark {font-size:25px;opacity:.75;right:16px;top:24px}
  .game-number {font-size:10px;letter-spacing:.3px;color:#35533e;left:18px;top:13px;line-height:1.5;font-weight:550}
  .colorful-card .mini,.thumb .mini {box-shadow:none;border:0;background:#fff;min-height:66px}
  .colorful-card .mini.alt {background:#ffffffd9}
  .card-copy {padding:20px;gap:0}
  .card-title {font:600 20px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;letter-spacing:-.3px;margin-bottom:10px;color:#224431}
  .card-title span {color:#456b51;margin-top:3px}
  .card-description {font-size:14px;line-height:1.65;color:#4b6254;margin:0 0 20px;min-height:46px;overflow-wrap:anywhere}
  .card-bottom {font-size:11px;border:0;padding-top:3px;gap:10px;margin-top:auto;color:#566d5b;flex-wrap:wrap}
  .card-bottom b {font-size:12px;font-weight:600;color:#245c3c}
  #noResults {font-size:15px;padding:32px;background:#fff;border:1px dashed #b6caba;border-radius:8px;margin:20px 0}
  footer {font:14px/1.6 Georgia,serif;color:#4f6956;gap:10px;flex-wrap:wrap;padding:30px 0 34px;border-top:1px solid #e0e8e2}
  footer>span:last-child {font:11px/1.5 Arial,sans-serif;color:#536b59}
  .footer-mark {color:#5b8064}
  .player-heading {padding:20px 0 12px;gap:16px;align-items:center}
  .player-heading>div {gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .game-info {padding:16px 0 22px;align-items:flex-start;gap:24px}
  .game-info h1 {font:400 36px/1.2 Georgia,serif;letter-spacing:-.8px}
  .game-info p:not(.eyebrow) {font-size:15px;line-height:1.7;color:#46614e;max-width:800px;margin-top:14px}
  .game-pack {font-size:12px;border-radius:6px;border-color:#dfe8e1;background:#edf3ee;max-width:330px;white-space:normal;line-height:1.5}
  .game-toolbar {background:#fff;border:1px solid #dce7df;border-radius:8px;gap:12px;padding:16px;margin:10px 0 14px;align-items:end}
  .game-toolbar>label {font-size:11px;line-height:1.5;color:#455f4e;gap:7px}
  .game-toolbar select {font-size:13px;padding:8px 10px;min-height:36px;background:#f6f9f6;color:#244b34;border-color:#bacfbe;max-width:290px}
  .game-toolbar .game-toggle {font-size:12px;color:#455f4e}
  .game-toolbar>button {font-size:12px;min-height:36px;padding:9px 11px}
  .classroom-bar {border-color:#dce7df;border-radius:8px;padding:14px;background:#fff;gap:16px}
  #scores {gap:10px;grid-template-columns:repeat(2,minmax(220px,1fr))}
  #scores:has(>.team:nth-child(odd):last-child)>.team:last-child {grid-column:1/-1}
  .team {border-radius:5px;padding:9px!important;border-left-width:3px!important;background:#f4f7f3;gap:8px!important;box-shadow:none!important}
  .team.is-active {background:#eaf2e9;outline:1px solid #8aa58e}
  .team-name {font-size:13px!important;color:#1e4e35;min-height:34px;border-bottom-color:#a8bdaa}
  .team b {font-size:24px;font-weight:500;min-width:28px;font-variant-numeric:tabular-nums;color:#214b33}
  .score-button {width:30px;height:30px;font-size:18px;border-radius:4px;background:#e3ece2;color:#295a39;flex-shrink:0}
  .timer {gap:10px;flex-wrap:wrap;justify-content:center}
  .timer select {font-size:12px;min-height:34px;max-width:95px;background:#eff4ed;color:#425e47}
  .timer b {font-size:24px;color:#2d563b;font-weight:500}
  .timer #timerToggle {font-size:12px}
  .stage {border:1px solid #d8e4da;background:#ecf3ed;border-radius:12px;min-height:400px;padding:28px}
  .extended-stage {padding:24px!important}
  .stage-controls {gap:10px;padding-top:20px}
  .stage-controls .secondary,.stage-controls .primary {font-size:14px;min-height:42px}
  .teacher-tip {font-size:13px;color:#4c6956;line-height:1.8;text-align:left;margin:16px 0;padding-bottom:20px;max-width:920px}
  .progress {font-size:12px;color:#48684f;letter-spacing:.5px;line-height:1.6}
  .hint {color:#596c50}
  .english {color:#45653e}
  .x-topline {font-size:13px;color:#47654d;gap:16px}
  .x-topline>label,.x-topline>b,.x-topline select {font-size:12px;color:#375c3e}
  .x-status {font-size:14px;line-height:1.7;color:#3d623f;background:#e2eddb;border-color:#bfd2b3}
  .x-small,.x-upload-note {font-size:12px;color:#4f6c53}
  .x-question>small {font-size:12px;letter-spacing:.6px;color:#4d7051}
  .x-model>small,.x-model>span {font-size:13px}
  .task-card-grid {gap:14px}
  .task-flip-card {border-radius:10px;box-shadow:none;min-height:160px}
  .task-flip-card small {font-size:10px;letter-spacing:1px;color:#34543d}
  .task-flip-card.open>span {font-size:18px}
  .task-flip-card.open {border-width:2px}
  .task-panel {border-color:#d6e4d6;border-radius:9px;padding:24px;background:#fff}
  .task-panel>small,.task-answer>small {font-size:12px;letter-spacing:.7px;color:#4c6a50}
  .task-question {font-size:28px;line-height:1.7}
  .task-answer {font-size:25px;border-top-color:#bdceba}
  .race-progress>div {font-size:12px;padding:10px}
  .board-legend {font-size:13px;color:#4b6751}
  .uno-room {border-radius:10px;background:#e7f0e9;padding:24px}
  .uno-top h2 {font:30px/1.2 Georgia,serif;color:#214b34}
  .uno-top p {font-size:14px;color:#4a6852}
  .uno-team-strip>div {font-size:12px;padding:12px;border-radius:6px}
  .uno-hand-title h3 {font:24px/1.3 Georgia,serif}
  .uno-hand-title span,.uno-hidden-hand>small {font-size:12px;color:#4c6852;line-height:1.6}
  .uno-hidden-hand {border-color:#9cbaa1;border-radius:8px;padding:26px;background:#ffffffa8}
  .sc-room-heading h2 {font:32px/1.2 Georgia,serif}
  .sc-options {border-radius:8px;border-color:#d4e2d5}
  .sc-options label,.sc-deck-note {font-size:13px;color:#44644b}
  .sc-options select {font-size:13px;min-height:38px}
  .sc-legend>span {font-size:12px;color:#49664e}
  .sc-page-nav b {font-size:13px}
  .sc-screen-grid {gap:14px}
  .sc-screen-grid .sc-card {border-radius:7px;border-style:solid;min-height:180px;box-shadow:none}
  .sc-screen-grid .sc-card-top {font-size:10px;line-height:1.5;padding:11px}
  .sc-screen-grid .sc-card-top small {font-size:13px}
  .sc-screen-grid .sc-pronunciation {font-size:12px;color:#547153}
  .sc-screen-grid .sc-meaning {font-size:13px;color:#3d5b41}
  .sc-screen-grid .sc-card-brand {font-size:10px;padding:6px 11px}
  .sc-how {border-color:#d4e0d3;border-radius:8px}
  dialog {border:1px solid #cfdcd2;border-radius:14px;box-shadow:0 22px 80px #133d2e33;padding:28px;max-height:90dvh;color:var(--ink);background:#fbfdfb}
  dialog::backdrop {background:#122f2670;backdrop-filter:none}
  .dialog-head h2 {font:29px/1.2 Georgia,serif;letter-spacing:-.4px}
  .dialog-head {align-items:flex-start;gap:16px}
  dialog .muted {font-size:14px;color:#4f6557;line-height:1.7}
  dialog>label {font-size:14px;color:#274b35;margin-top:18px}
  dialog>label small {font-size:12px;color:#526d58;line-height:1.6;margin-top:5px}
  dialog input,dialog textarea,dialog select {font-size:14px;border-color:#bacebf;background:#fff;color:#284c36;border-radius:6px;line-height:1.6}
  dialog textarea {padding:12px;font-size:16px}
  .toggle-row label {font-size:13px;color:#385b40}
  .dialog-actions {gap:10px;flex-wrap:wrap;position:static;background:transparent;padding-top:20px}
  .guide-list {font-size:14px;line-height:1.8;color:#44614b}
  .guide-note {font-size:13px;color:#536b59;line-height:1.8}
  .uno-print-help {font-size:13px;color:#4f6756;line-height:1.7}
  .uno-print-nav b {font-size:13px;color:#31583c}
  .uno-print-options>span,.uno-print-options label {font-size:13px;color:#42614b}
  .uno-print-preview-wrap {background:#e3eae4;border-radius:6px;padding:20px}
  #toast {font-size:14px;border-radius:8px;background:#204d36;color:#fff}
  .h-builder-heading h1 {font:36px/1.2 Georgia,serif}
  .h-builder-heading p {font-size:14px;line-height:1.7;color:#4e6955}
  .h-options {background:#fff;border-color:#d7e2d8;border-radius:10px}
  .h-options label,.h-option-checks label {font-size:13px;color:#37583e}
  .h-options label small,.h-options>p {font-size:12px;color:#526c56}
  .h-options select {font-size:13px;min-height:38px;border-color:#b7cdbb;color:#345a3d;background:#f7faf6}
  .h-preview-label {font-size:12px;color:#4c6b51}
  .h-template-list button {font-size:13px}
  .presenting .app {margin-left:0}
  .presenting .game-info h1 {font-size:34px}
  .presenting .extended-stage {padding:24px!important}
  @media (min-width:1600px) {
    :root {--canvas-gutter:44px}
    .sidebar {width:240px}
    .app {margin-left:240px}
    .hero {min-height:280px;grid-template-columns:minmax(0,1fr) 300px}
    .hero-art {justify-self:center}
  }
  @media (max-width:1100px) {
    :root {--canvas-gutter:24px}
    .sidebar {width:202px;padding-inline:12px}
    .brand-logo {width:166px}
    .app {margin-left:202px}
    .side-link,.side-link#physicalCardsNav {font-size:12px;padding-inline:9px;gap:7px}
    .hero {grid-template-columns:minmax(0,1fr) 210px;gap:14px;min-height:250px}
    .hero h1 {font-size:33px}
    .hero-art {width:210px;transform:scale(.86);transform-origin:center}
    .packbar {flex-wrap:wrap}
    .pack-desc {margin-left:0;flex:1}
    .game-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
    .card-title {font-size:19px}
    .card-copy {padding:17px}
    .card-description {font-size:14px}
    .section-row {align-items:flex-start}
    .section-row h2 {font-size:25px}
    .section-row h2 span {display:inline-block;margin:7px 0 0 5px}
    #scores {grid-template-columns:1fr}
    .timer {flex:1}
    .game-pack {max-width:220px}
    .game-toolbar>button:first-of-type {margin-left:0}
    .task-card-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
    .sc-screen-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @media (max-width:800px) {
    :root {--canvas-gutter:20px}
    /* Existing sidebar contents remain accessible in a compact top navigation. */
    .sidebar {position:relative;inset:auto;width:100%;padding:18px 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px;overflow:visible;border-right:0;border-bottom:1px solid #dce6df;background:#f5f8f5}
    .brand {grid-column:1/-1;align-items:flex-start;margin:0 0 6px;padding:0}
    .brand-logo {width:170px}
    .brand>small {font-size:9px;letter-spacing:.6px}
    .side-caption {grid-column:1/-1;margin:9px 0 5px;font-size:10px}
    .side-link,.side-link#physicalCardsNav {min-width:0;width:100%;min-height:44px;padding:9px 10px;gap:7px;font-size:13px;margin:0}
    .side-link>span {font-size:17px;min-width:18px}
    .side-note {grid-column:1/-1;margin:6px 0;padding:12px 0;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:0 12px}
    .side-note .note-star {grid-row:1/3;font-size:24px}
    .side-note h3 {font:19px/1.3 Georgia,serif;margin:0}
    .side-note p {font-size:12px;line-height:1.6;margin:4px 0 0;grid-column:2;max-width:530px}
    .side-note .note-ar {grid-column:3;grid-row:1/3;font-size:25px;margin:0}
    .side-link.bottom {margin:0;padding:9px 10px}
    .side-foot {font-size:9px;line-height:1.6;padding:8px 0;align-self:center;text-align:right;letter-spacing:0}
    .app {margin-left:0}
    header {height:54px}
    .hero {grid-template-columns:minmax(0,1fr) 210px;padding:23px 0 26px;min-height:235px}
    .hero h1 {font-size:34px}
    .hero-copy {font-size:14px}
    .hero-tags {font-size:11px}
    .handout-invite {padding:20px;align-items:flex-start;gap:18px}
    .handout-invite h2 {font-size:24px}
    .handout-invite .secondary {flex-shrink:0}
    .game-info {gap:16px;flex-wrap:wrap}
    .game-info p:not(.eyebrow) {font-size:14px}
    .game-pack {max-width:100%}
    .game-toolbar {gap:12px}
    .game-toolbar>label:first-child {flex:1 1 230px}
    .game-toolbar select {max-width:100%}
    .classroom-bar {gap:16px}
    #scores {grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
    .team {min-width:0}
    .timer {flex:1 1 100%;justify-content:flex-end}
    .stage,.extended-stage {padding:20px!important}
    .teacher-tip {font-size:13px}
    .sc-screen-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
    dialog {padding:24px;max-width:calc(100vw - 24px)}
  }
  @media (max-width:560px) {
    :root {--canvas-gutter:16px}
    .sidebar {padding:16px;gap:4px 8px}
    .side-note {grid-template-columns:24px minmax(0,1fr);gap:0 9px}
    .side-note .note-ar {grid-column:2;grid-row:auto;font-size:22px;text-align:left;margin-top:7px}
    .side-link,.side-link#physicalCardsNav {font-size:12px;gap:6px}
    .side-link b {font-size:10px}
    .header-right {font-size:11px;gap:5px}
    .breadcrumb {font-size:11px}
    .avatar {margin-left:5px;width:30px;height:30px;min-height:30px}
    .hero {grid-template-columns:1fr;gap:14px;padding:23px 0 22px;min-height:0}
    .hero h1 {font-size:32px;line-height:1.15;letter-spacing:-.9px;text-wrap:initial}
    .hero h1 br {display:none}
    .hero .eyebrow {font-size:10px;margin-bottom:12px}
    .hero-copy {max-width:none;margin:14px 0;font-size:14px;line-height:1.7}
    .hero-tags {gap:7px 12px;font-size:11px}
    .hero-art {display:block;width:100%;height:170px;transform:none;min-height:170px;margin:8px 0 0}
    .art-orbit {width:100%;height:140px;top:8px;right:0;border-radius:8px;background:#e4eee5}
    .art-card.one {left:20px;top:1px;width:140px;height:142px;gap:9px;transform:rotate(-3deg)}
    .art-card.one strong {font-size:37px}
    .art-card.one small {font-size:9px}
    .art-card.one span {font-size:11px}
    .art-card.two {width:103px;height:112px;right:20px;top:29px;transform:rotate(4deg)}
    .art-card.two span {font-size:34px}
    .art-card.two b {font-size:25px}
    .art-spark {right:8px;top:-11px;font-size:24px}
    .art-label {left:20px;bottom:0;font-size:11px}
    .packbar {padding:16px;gap:10px;display:grid;grid-template-columns:30px minmax(0,1fr)}
    .pack-icon {width:30px;height:34px;font-size:20px}
    .packbar>div:nth-child(2) {min-width:0}
    .packbar select {font-size:13px;width:100%;max-width:100%;white-space:normal}
    .pack-desc {grid-column:2;font-size:12px;margin:0}
    .packbar .text-button {grid-column:2;margin:0;text-align:left;justify-self:start}
    .handout-invite {display:block;margin:16px 0 26px;padding:20px}
    .handout-invite h2 {font-size:25px}
    .handout-invite p {font-size:13px}
    .handout-invite .secondary {margin-top:16px;min-height:44px}
    .section-row {display:block}
    .section-row h2 {font-size:27px;line-height:1.25}
    .section-row h2 span {font-size:11px;display:inline-block;margin-left:0;vertical-align:middle}
    .section-row p {font-size:13px}
    .search-wrap {margin-top:16px;width:100%;min-height:44px}
    .search-wrap input {width:100%;font-size:14px;min-height:24px}
    .filter-row {gap:6px;padding-top:16px}
    .filter {font-size:12px;padding:9px 10px;min-height:40px}
    .game-group {margin:20px 0 30px}
    .group-heading {align-items:flex-start;padding:12px 0 16px;gap:12px}
    .group-heading h3 {font-size:26px}
    .group-heading p {font-size:13px;line-height:1.6}
    .group-heading>span {font-size:10px;padding-top:5px}
    .game-grid,.game-grid:has(>.game-card:nth-child(2):last-child),.game-grid:has(>.game-card:nth-child(4):last-child) {grid-template-columns:1fr;gap:14px}
    .card-copy {padding:20px}
    .card-title {font-size:21px}
    .card-description {font-size:14px;min-height:0;line-height:1.7}
    .card-bottom {font-size:12px}
    .thumb,.colorful-card .thumb {height:147px}
    .game-number {font-size:10px;left:20px}
    footer {font-size:13px;align-items:flex-start;gap:10px;padding-block:24px}
    footer>span:last-child {width:100%;font-size:11px;margin-left:0}
    .player-heading {align-items:flex-start;gap:12px;flex-wrap:wrap}
    .player-heading>div {justify-content:flex-start;width:100%}
    .player-heading button {font-size:12px;min-height:40px}
    .game-info {padding-top:12px}
    .game-info h1 {font-size:32px}
    .game-info .eyebrow {font-size:11px}
    .game-info p:not(.eyebrow) {font-size:14px;line-height:1.8}
    .game-toolbar {padding:14px}
    .game-toolbar>label {font-size:12px}
    .game-toolbar>button {min-height:40px;font-size:12px}
    .game-toolbar select {font-size:13px;min-height:40px}
    .classroom-bar {padding:12px}
    #scores {grid-template-columns:1fr}
    .team-name {font-size:14px!important}
    .score-button {width:34px;height:34px}
    .timer {justify-content:space-between;gap:6px}
    .timer b {font-size:23px}
    .stage,.extended-stage {padding:16px!important;border-radius:9px}
    .stage-controls {gap:8px;align-items:stretch}
    .stage-controls>.primary,.stage-controls>.secondary {font-size:13px;min-height:44px;flex:1 1 140px}
    .task-card-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
    .task-flip-card {min-height:145px;padding:12px}
    .task-flip-card.open>span {font-size:16px}
    .task-flip-card .cover-icon {font-size:42px}
    .task-flip-card small {font-size:9px;letter-spacing:.5px}
    .task-panel {padding:20px 14px}
    .task-question {font-size:24px}
    .task-answer {font-size:23px}
    .x-topline {gap:12px;font-size:12px}
    .x-topline>label {justify-content:space-between;flex-wrap:wrap;max-width:100%}
    .x-topline select {max-width:100%;font-size:12px;min-height:40px}
    .uno-room {padding:15px}
    .uno-top {gap:18px}
    .uno-top h2 {font-size:28px}
    .uno-top p {font-size:13px}
    .uno-top #openUnoPrint {width:100%;min-height:44px}
    .uno-team-strip {gap:7px}
    .uno-team-strip>div {padding:9px;font-size:11px}
    .uno-team-strip>div>span:last-child {font-size:11px}
    .uno-hidden-hand {padding:22px 12px}
    .uno-hidden-hand>span {font-size:25px;letter-spacing:4px}
    .uno-hand-title span {font-size:12px}
    .uno-hand {gap:9px}
    .sc-room-heading h2 {font-size:29px}
    .sc-room-heading p:not(.eyebrow) {font-size:13px}
    .sc-screen-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .sc-screen-grid .sc-card {min-height:175px}
    .sc-screen-grid .sc-card-top {font-size:8px;padding:9px 8px;line-height:1.6}
    .sc-screen-grid .sc-card-top small {font-size:11px}
    .sc-screen-grid .sc-word {padding:12px 8px}
    .sc-screen-grid .sc-word>strong {font-size:27px}
    .sc-screen-grid .sc-meaning {font-size:12px}
    .sc-screen-grid .sc-pronunciation {font-size:11px}
    .sc-screen-grid .sc-card-brand {font-size:9px}
    .sc-options label {font-size:12px}
    .sc-options label:first-child {display:block}
    .sc-options select {width:100%;margin-top:8px}
    .sc-legend {gap:8px 12px}
    .sc-legend>span {font-size:10px}
    .sc-how {padding:16px}
    .sc-model-tiles>span {font-size:21px}
    dialog {padding:20px;max-width:calc(100vw - 16px);border-radius:10px;max-height:92dvh}
    .dialog-head h2 {font-size:27px}
    .dialog-head .icon-button {margin:-6px -6px 0 0}
    .two-fields {grid-template-columns:1fr}
    .toggle-row {gap:12px;flex-wrap:wrap}
    .dialog-actions>button {flex:1 1 120px;min-height:44px;font-size:12px}
    .uno-print-options {gap:16px}
    .uno-print-options>span {flex:1 1 100%}
    .uno-print-options>.primary {width:100%;min-height:44px}
    .uno-print-nav {gap:8px;flex-wrap:wrap}
    .uno-print-nav button {font-size:11px;padding-inline:9px;min-height:40px}
    .uno-print-nav b {font-size:12px}
    .uno-print-preview-wrap {padding:12px}
    .h-builder-heading h1 {font-size:31px}
    .h-workspace {display:block}
    .h-options {margin-bottom:18px}
    .presenting .game-info h1 {font-size:29px}
    .presenting .game-toolbar {padding:12px}
  }
  @media (prefers-reduced-motion:reduce) {
    button,.game-card {transition:none}
    .game-card:hover,.colorful-card:hover {transform:none}
  }
}
@media screen {
  .pack-desc {display:block}
  .section-row h2 span {display:inline-block}
  @media(max-width:800px) {
    .side-caption,.side-foot {display:block}
    .side-link.bottom {display:flex}
    .side-link>span,.side-link>b {display:inline-block}
  }
  @media(max-width:560px) {
    .hero h1 br {display:initial}
    .pack-icon {display:grid}
    .packbar .text-button span,.card-title span {display:inline}
    footer>span:last-child {display:block}
  }
}
@media screen {
  .mobile-navigation {display:flex;flex:1;flex-direction:column;min-height:0}
  .mobile-navigation>summary {list-style:none;cursor:pointer}
  .mobile-navigation>summary::-webkit-details-marker {display:none}
  .mobile-navigation>summary:focus-visible {outline:3px solid #2169a1;outline-offset:3px}
  @media(min-width:801px) {
    .mobile-navigation>summary {pointer-events:none}
  }
  @media(max-width:800px) {
    .sidebar {display:block;padding:18px 20px;position:relative}
    .brand {width:175px;margin:0}
    .mobile-navigation {display:block}
    .mobile-navigation>summary {position:absolute;right:20px;top:23px;display:flex;align-items:center;gap:9px;min-height:38px;padding:8px 10px;margin:0;background:#e4ece6;border-radius:6px;color:#2c5038;font-size:9px;letter-spacing:.3px}
    .mobile-navigation>summary:after {content:'⌄';font-size:17px;line-height:1}
    .mobile-navigation[open] {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px;padding-top:18px}
    .mobile-navigation[open]>summary:after {content:'⌃'}
    .mobile-navigation>.side-note {padding:14px 0;margin:8px 0;grid-column:1/-1}
    .mobile-navigation>.side-foot {grid-column:auto}
    .mobile-navigation>.side-link.bottom {margin:0}
  }
  @media(max-width:560px) {
    .sidebar {padding:16px}
    .brand {width:164px}
    .brand-logo {width:160px}
    .mobile-navigation>summary {right:16px;top:20px;font-size:8px;letter-spacing:0;gap:6px;max-width:152px}
    .mobile-navigation[open] {gap:5px 8px;padding-top:16px}
  }
}
@media screen {
  .h-hero {min-height:270px;padding:26px 0 30px;gap:24px}
  .h-hero h1 {font:400 42px/1.1 Georgia,serif;letter-spacing:-1.1px;margin:12px 0 16px}
  .h-hero h1 em {font-style:normal;color:inherit}
  .h-hero>div>p:not(.eyebrow) {font-size:14px;color:#4d6558;line-height:1.7}
  .h-paper-art {margin-right:12px;width:220px;height:220px}
  .h-art-sheet {box-shadow:none;background:#fff;border:1px solid #dae3db;border-radius:8px}
  .h-art-sheet>span {font-size:8px;color:#526a57;letter-spacing:.4px}
  .h-art-sheet small {font-size:11px;color:#55715b}
  .h-art-stamp {color:#4d7b5b;font-size:50px}
  .h-mini-sheet {box-shadow:none;border-color:#d5e0d6}
  .card-type {font-size:10px;letter-spacing:.5px;color:#4e6c55}
  .h-library-note {font-size:14px;color:#4d6855;background:#eaf0e9;border:0;border-radius:10px;line-height:1.8;padding:24px}
  .h-library-note b {font-size:23px}
  .h-support-note {font-size:12px;color:#506d56;line-height:1.75}
  .h-options-footer {font-size:13px;background:#edf3eb}
  .h-options-footer p {font-size:12px;color:#4f6955;line-height:1.7}
  .h-options-footer button {font-size:12px;min-height:40px}
  @media(max-width:800px) {
    .h-hero h1 {font-size:34px}
    .h-paper-art {width:190px;height:210px}
  }
  @media(max-width:560px) {
    .h-hero h1 {font-size:31px;line-height:1.15}
    .h-hero>div>p:not(.eyebrow) {font-size:14px}
    .h-hero {padding-top:24px;min-height:0}
    .h-library-note {padding:20px;font-size:13px}
    .h-options-footer button {width:100%;min-height:44px}
  }
}