:root{--bg:var(--hh-background-color-main,#f7f8fa);--panel:var(--hh-background-color-content,#fff);--text:var(--bs-body-color,#222);--muted:rgba(0,0,0,.60);--accent:var(--primary,#3b82f6);--shadow:0 10px 30px rgba(0,0,0,.08);--radius:18px;} .abcgames_wrap{auto;padding:12px;} .abcgames_toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid rgba(0,0,0,.06);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.05);padding:10px;} .abcgames_toolbar .btn{cursor:pointer;border:0;border-radius:10px;padding:10px 12px;background:var(--accent);color:#fff;font-weight:800;} .abcgames_toolbar .btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent);} .abcgames_info{color:var(--muted);font-size:.95rem;} #abcgames_iframe{width:100%;border:0;border-radius:14px;background:var(--panel);} .abcgames_grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:14px;margin-top:12px;} @media(min-width:720px){.abcgames_grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(min-width:1080px){.abcgames_grid{grid-template-columns:repeat(3,minmax(0,1fr));}} .abcgames_card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);overflow:hidden;display:flex;flex-direction:column;} .abcgames_thumb{height:130px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(99,102,241,.15));} .abcgames_thumb svg{width:84px;height:84px;opacity:.9;} .abcgames_body{padding:14px;display:flex;flex-direction:column;gap:8px;} .abcgames_title{font-weight:800;font-size:1.05rem;margin:0;} .abcgames_desc{color:var(--muted);font-size:.95rem;margin:0;min-height:40px;} .abcgames_tagbar{display:flex;gap:6px;flex-wrap:wrap;} .abcgames_tag{background:#eef2ff;color:#1e40af;padding:4px 8px;border-radius:999px;font-size:.8rem;cursor:pointer;user-select:none;} .abcgames_tag.is-active{background:#dbeafe;outline:2px solid #93c5fd;} .abcgames_actions{display:flex;gap:8px;margin-top:auto;} .abcgames_btn{display:inline-block;text-align:center;flex:1;background:var(--accent);color:#fff;text-decoration:none;font-weight:800;padding:10px 12px;border-radius:12px;} .abcgames_chip{background:#f1f5f9;color:#0f172a;padding:6px 10px;border-radius:999px;cursor:pointer;border:1px solid rgba(0,0,0,.06);} .abcgames_chip.clear{background:#fee2e2;color:#991b1b;} #abcgames_orient_tip{display:none;color:#8a6d1a;background:#fff7e6;border:1px dashed #facc15;padding:6px 10px;border-radius:10px;margin-left:auto;} .abc_toast{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;background:#111;color:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.24);z-index:9999;opacity:.96;} .abc_toast .btn{margin-left:8px;} /* ABC Games panel shim: keep .panel, support dark mode, future-proof with .card */ .abcgames_wrap .abcg-panel { border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.06); background: var(--hh-background-color-content,#fff); } .abcgames_wrap .abcg-panel .panel-heading, .abcgames_wrap .abcg-panel .card-header { font-weight: 800; border-bottom: 1px solid rgba(0,0,0,.06); background: transparent; } .abcgames_wrap .abcg-panel .panel-body, .abcgames_wrap .abcg-panel .card-body { background: transparent; } /* Dark mode tweak (HumHub sets data-bs-theme on ) */ html[data-bs-theme="dark"] .abcgames_wrap .abcg-panel { background: var(--hh-background-color-content,#111827); border-color: rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.35); } html[data-bs-theme="dark"] .abcgames_wrap .abcg-panel .panel-heading, html[data-bs-theme="dark"] .abcgames_wrap .abcg-panel .card-header { border-bottom-color: rgba(255,255,255,.08); } /* Keep your full-bleed wrapper (you liked this better on mobile) */ .abcgames_wrap { padding: 12px; } /* (Optional) limit width on very large screens: @media (min-width:1280px){ .abcgames_wrap{ max-width:1100px; margin:16px auto; } } */ /* Let the grid actually use the full available width */ #abcgames_lg_grid { width: 100%; } /* Prevent min-content shrink on inner grids too */ .abcgames_rowgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* (Optional) nicer cell layout for long labels */ .abcgames_cell { display: flex; flex-direction: column; gap: 6px; text-align: left; word-break: break-word; } /* Mobile: stack the clues under the grid */ @media (max-width: 720px) { .abcgames_row { grid-template-columns: 1fr !important; } } /* Two-column: matrix grows, clues fixed width */ .lg-layout{ display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:14px; align-items:start; } .lg-left { min-width:0; } /* allow left column to shrink properly */ .lg-right{ } .lg-matrix{ display:grid; gap:12px; width:100%; } /* Each 3×3 slab in the matrix */ .abcgames_rowgrid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; } /* Cells wrap nicely and don’t overflow */ .abcgames_cell{ display:flex; flex-direction:column; gap:6px; text-align:left; word-break:break-word; } /* Stack on phones */ @media (max-width: 720px){ .lg-layout{ grid-template-columns: 1fr; } .lg-right{ grid-column:1; } }