munchboka-edutools 0.1.0__py3-none-any.whl

munchboka_edutools/static/css/jeopardy.css

@@ -0,0 +1,476 @@
+/* Replacing with legacy Jeopardy CSS for faithful styling */
+/* Jeopardy board styles with light/dark mode (Material-aligned) */
+
+/* Color system */
+:root {
+  color-scheme: light dark;
+  /* Light mode tokens */
+  --jp-bg: #FAFAFA;             /* background */
+  --jp-surface: #FFFFFF;         /* surfaces/cards */
+  --jp-text: #1F1F1F;            /* primary text */
+  --jp-subtle-text: #5F6368;     /* secondary text */
+  --jp-outline: #E0E3EB;         /* outlines/dividers */
+  --jp-primary: #1A73E8;         /* Google Blue 600 */
+  --jp-primary-strong: #0B57D0;  /* header/nav */
+  --jp-on-primary: #FFFFFF;      /* text on primary */
+  --jp-secondary: #E8F0FE;       /* subtle surface tint */
+  --jp-danger: #D93025;          /* Google Red 600 */
+  --jp-success: #188038;         /* Google Green 700 */
+  --jp-success-border: #0F6E31;  /* darker green for outline */
+  --jp-accent: #F29900;          /* Orange for reset */
+  --jp-accent-border: #C47D00;   /* Darker orange border */
+  --jp-shadow: 0 2px 6px rgba(0,0,0,0.12);
+  --jp-shadow-lg: 0 8px 30px rgba(0,0,0,0.22);
+  /* Components */
+  --jp-header-bg: var(--jp-primary-strong);
+  --jp-header-fg: var(--jp-on-primary);
+  --jp-team-bg: var(--jp-primary-strong);
+  --jp-team-fg: var(--jp-on-primary);
+  --jp-team-border: rgba(255,255,255,0.28);
+  --jp-tile-bg: var(--jp-primary);
+  --jp-tile-fg: #FFFFFF;         /* readable contrast */
+  --jp-modal-bg: var(--jp-surface);
+  --jp-modal-fg: var(--jp-text);
+  /* Make modal footer match page/surface in light mode */
+  --jp-modal-footer: #FFFFFF;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Dark mode tokens */
+    --jp-bg: #121212;
+    --jp-surface: #1E1E1E;
+    --jp-text: #E8EAED;
+    --jp-subtle-text: #9AA0A6;
+    --jp-outline: #2A2E34;
+    --jp-primary: #1B66C9;         /* darker blue for tiles */
+    --jp-primary-strong: #1C3B70;  /* deep header/nav */
+    --jp-on-primary: #FFFFFF;
+    --jp-secondary: #171A21;       /* modal footer tint */
+    --jp-danger: #EA4335;          /* Google Red 500 */
+  --jp-success: #1E8E3E;         /* Material green for dark */
+  --jp-success-border: #167C35;  /* darker variant for outline */
+    --jp-accent: #F6A400;          /* Slightly lighter orange for dark */
+    --jp-accent-border: #DB8E00;   /* Darker orange border */
+    --jp-shadow: 0 2px 6px rgba(0,0,0,0.4);
+    --jp-shadow-lg: 0 8px 30px rgba(0,0,0,0.6);
+    /* Components */
+    --jp-header-bg: var(--jp-primary-strong);
+    --jp-header-fg: var(--jp-on-primary);
+    --jp-team-bg: var(--jp-primary-strong);
+    --jp-team-fg: var(--jp-on-primary);
+    --jp-team-border: rgba(255,255,255,0.22);
+    --jp-tile-bg: var(--jp-primary);
+    --jp-tile-fg: #FFFFFF;
+    --jp-modal-bg: var(--jp-surface);
+    --jp-modal-fg: var(--jp-text);
+    --jp-modal-footer: #161A20;
+  }
+  /* In dark mode, keep container on the dark surface token */
+  .jeopardy-container { background: var(--jp-bg); }
+}
+
+/* Explicit dark tokens when user selects dark mode (override system light) */
+html.dark-mode,
+body.dark-mode,
+html[data-theme='dark'],
+body[data-theme='dark'],
+html[data-mode='dark'] {
+  --jp-bg: #121212;
+  --jp-surface: #1E1E1E;
+  --jp-text: #E8EAED;
+  --jp-subtle-text: #9AA0A6;
+  --jp-outline: #2A2E34;
+  --jp-primary: #1B66C9;
+  --jp-primary-strong: #1C3B70;
+  --jp-on-primary: #FFFFFF;
+  --jp-secondary: #171A21;
+  --jp-danger: #EA4335;
+  --jp-success: #1E8E3E;
+  --jp-success-border: #167C35;
+  --jp-accent: #F6A400;
+  --jp-accent-border: #DB8E00;
+  --jp-shadow: 0 2px 6px rgba(0,0,0,0.4);
+  --jp-shadow-lg: 0 8px 30px rgba(0,0,0,0.6);
+  --jp-header-bg: var(--jp-primary-strong);
+  --jp-header-fg: var(--jp-on-primary);
+  --jp-team-bg: var(--jp-primary-strong);
+  --jp-team-fg: var(--jp-on-primary);
+  --jp-team-border: rgba(255,255,255,0.22);
+  --jp-tile-bg: var(--jp-primary);
+  --jp-tile-fg: #FFFFFF;
+  --jp-modal-bg: var(--jp-surface);
+  --jp-modal-fg: var(--jp-text);
+  --jp-modal-footer: #161A20;
+}
+
+.jeopardy-container { 
+  box-sizing: border-box;
+  width: 100%;
+  margin: 1rem auto;
+  padding: 0.5rem;
+  /* In light mode, let the page background show through */
+  background: transparent !important;
+  color: var(--jp-text);
+}
+
+/* When embedded inside admonitions, add extra right padding so content doesn't touch the border */
+.admonition .jeopardy-container {
+  padding-right: 2.5rem;
+}
+
+/* Prevent horizontal overflow inside admonitions and tighten spacing on small widths */
+.admonition .jeopardy-container { overflow-x: hidden; }
+@media (max-width: 900px) {
+  .jeopardy-grid { border-spacing: 6px; }
+  .jeopardy-grid thead th { padding: 0.6rem; }
+  .jeopardy-tile { padding: 0.8rem 0.4rem; }
+}
+@media (max-width: 600px) {
+  .jeopardy-grid { border-spacing: 4px; }
+  .jeopardy-grid thead th { padding: 0.5rem; }
+  .jeopardy-tile { padding: 0.6rem 0.35rem; }
+}
+
+.jeopardy-scorebar {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+.jeopardy-topbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
+.jeopardy-scorebar-wrap { flex: 1 1 auto; display: flex; justify-content: center; }
+.jeopardy-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
+.jeopardy-reset-button { white-space: nowrap; }
+.jeopardy-turn-indicator {
+  text-align: center;
+  margin: -0.5rem 0 0.5rem 0; /* tuck closer to the scorebar */
+  font-weight: 700;
+  color: var(--jp-text);
+  background: var(--jp-surface);
+  border: 1px solid var(--jp-outline);
+  display: inline-block;
+  padding: 0.35rem 0.75rem;
+  border-radius: 999px; /* pill */
+  box-shadow: var(--jp-shadow);
+}
+.jeopardy-team {
+  background: var(--jp-team-bg);
+  color: var(--jp-team-fg);
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  min-width: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: var(--jp-shadow);
+}
+.jeopardy-team input.team-name {
+  background: transparent;
+  color: var(--jp-team-fg);
+  border: 1px solid var(--jp-team-border);
+  border-radius: 4px;
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  min-width: 80px;
+}
+.jeopardy-team input.team-name::placeholder { color: rgba(255,255,255,0.7); }
+.jeopardy-team .score { font-weight: 700; margin: 0 0.5rem; }
+
+/* Active team highlight for turn-based mode */
+.jeopardy-team.active {
+  outline: 2px solid var(--jp-outline);
+  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.35);
+}
+
+.jeopardy-grid {
+  width: 100%;
+  max-width: 100%;
+  table-layout: fixed; /* force columns to fit container width */
+  border-collapse: separate;
+  border-spacing: 8px;
+}
+.jeopardy-grid thead th {
+  background: var(--jp-header-bg);
+  color: var(--jp-header-fg);
+  text-align: center;
+  padding: 0.75rem;
+  border-radius: 8px;
+  font-weight: 700;
+  /* allow long category names to wrap and avoid overflow */
+  white-space: normal;
+  /* prefer hyphenation on word breaks */
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  word-break: normal;
+  overflow-wrap: break-word;
+  /* scale header font for narrow containers */
+  font-size: clamp(0.85rem, 1.8vw, 1rem);
+}
+.jeopardy-grid tbody td { text-align: center; }
+
+.jeopardy-tile {
+  width: 100%;
+  background: var(--jp-tile-bg);
+  color: var(--jp-tile-fg);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 8px;
+  padding: 1rem 0.5rem;
+  /* responsive font that shrinks on tight layouts */
+  font-size: clamp(0.9rem, 2.2vw, 1.25rem);
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: var(--jp-shadow);
+  transition: transform 0.06s ease, opacity 0.2s ease, box-shadow 0.2s ease;
+  /* allow tile text to wrap when needed */
+  white-space: normal;
+  /* prefer hyphenation on word breaks */
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+.jeopardy-tile:hover { transform: translateY(-2px); box-shadow: var(--jp-shadow-lg); }
+.jeopardy-tile:focus { outline: 2px solid var(--jp-outline); outline-offset: 2px; }
+.jeopardy-tile.used { opacity: 0.35; cursor: default; }
+
+/* Modal */
+.jeopardy-modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
+  display: none; align-items: center; justify-content: center;
+  z-index: 9999;
+}
+.jeopardy-modal {
+  background: var(--jp-modal-bg); color: var(--jp-modal-fg);
+  width: min(900px, 92vw);
+  border-radius: 10px;
+  box-shadow: var(--jp-shadow-lg);
+  /* Enable internal scroll when content is tall */
+  max-height: 92vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.jeopardy-modal-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0.75rem 1rem; background: var(--jp-header-bg); color: var(--jp-header-fg);
+}
+.jeopardy-timer { font-weight: 700; padding: 0 0.5rem; }
+.jeopardy-modal-body {
+  padding: 1rem; background: inherit;
+  /* Scroll only the body; keep header/footer visible */
+  flex: 1 1 auto;
+  overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch; /* smooth on iOS */
+}
+.jeopardy-modal-footer { 
+  padding: 0.75rem 1rem; 
+  background: var(--jp-modal-footer); 
+  display: flex; 
+  align-items: center; 
+  gap: 0.5rem;
+}
+.jeopardy-modal-footer .jeopardy-team-actions { margin-top: 0; }
+.jeopardy-footer-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
+
+/* Auto theme (OS/browser preference) */
+@media (prefers-color-scheme: light) {
+  .jeopardy-modal-body { background: #FFFFFF; color: #000000; }
+  /* Ensure auto mode adopts the same light overrides explicitly */
+  [data-mode='auto'] .jeopardy-modal-body { background: #FFFFFF; color: #000000; }
+  [data-mode='auto'] .jeopardy-setup { background: #E8F0FE; color: #000000; }
+  [data-mode='auto'] .jeopardy-setup .jp-field label { color: #000000; }
+  [data-mode='auto'] .jeopardy-setup input,
+  [data-mode='auto'] .jeopardy-setup select { background: #FFFFFF; color: #000000; border-color: var(--jp-outline); }
+  [data-mode='auto'] .jeopardy-resume-prompt { background: #E8F0FE; color: #000000; border-color: var(--jp-outline); }
+  /* In auto+light, keep container transparent so the page background shows */
+  [data-mode='auto'] .jeopardy-container { background: transparent !important; color: var(--jp-text); }
+}
+@media (prefers-color-scheme: dark) {
+  .jeopardy-modal-body { background: inherit; }
+}
+
+/* Explicit theme overrides if site provides toggles */
+html.light-mode .jeopardy-modal-body,
+body.light-mode .jeopardy-modal-body,
+html[data-theme='light'] .jeopardy-modal-body,
+body[data-theme='light'] .jeopardy-modal-body,
+[data-mode='light'] .jeopardy-modal-body { background: #FFFFFF !important; color: #000000 !important; }
+
+html.dark-mode .jeopardy-modal-body,
+body.dark-mode .jeopardy-modal-body,
+html[data-theme='dark'] .jeopardy-modal-body,
+body[data-theme='dark'] .jeopardy-modal-body,
+[data-mode='dark'] .jeopardy-modal-body { background: var(--jp-modal-bg) !important; color: var(--jp-modal-fg) !important; }
+
+.jeopardy-q { font-size: 1.05rem; margin-bottom: 1rem; background: inherit !important; }
+.jeopardy-a { display: none; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--jp-outline); }
+
+/* Improve wrapping with hyphens inside modal content */
+.jeopardy-modal-body, .jeopardy-q, .jeopardy-a {
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+
+.jeopardy-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+.j-btn { padding: 0.5rem 0.75rem; border: none; border-radius: 6px; cursor: pointer; }
+.j-btn.primary { background: var(--jp-primary); color: var(--jp-on-primary); }
+.j-btn.primary:hover { filter: brightness(1.05); }
+.j-btn.secondary { background: var(--jp-secondary); color: var(--jp-text); }
+.j-btn.warn { background: var(--jp-danger); color: #fff; }
+.j-btn.warn:hover { filter: brightness(1.05); }
+.j-btn.success { 
+  background: var(--jp-success);
+  color: #fff;
+  border: 2px solid var(--jp-success-border);
+}
+.j-btn.success:hover { filter: brightness(1.05); }
+.j-btn.accent {
+  background: var(--jp-accent);
+  color: #fff;
+  border: 2px solid var(--jp-accent-border);
+}
+.j-btn.accent:hover { filter: brightness(1.05); }
+.j-btn:focus { outline: 2px solid var(--jp-outline); outline-offset: 2px; }
+
+.jeopardy-team-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
+.jeopardy-team-actions .j-btn { font-size: 0.9rem; }
+
+/* Images inside content */
+.jeopardy-image-container {
+  text-align: center;
+  margin: 0.5rem 0;
+  /* Robust centering regardless of global img display rules */
+  display: flex;
+  justify-content: center;
+}
+.jeopardy-image-container img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  /* If themes force block images, keep them centered */
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Pre-game setup panel */
+.jeopardy-setup {
+  background: var(--jp-modal-bg);
+  color: var(--jp-modal-fg);
+  border: 1px solid var(--jp-outline);
+  border-radius: 8px;
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+  box-shadow: var(--jp-shadow);
+}
+.jeopardy-setup .jp-field { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
+.jeopardy-setup .jp-field label { min-width: 7rem; font-weight: 600; }
+.jeopardy-setup .jp-names { display: grid; grid-template-columns: 1fr; gap: 0.35rem; margin-bottom: 0.5rem; }
+.jeopardy-setup .jp-name-row { display: flex; align-items: center; gap: 0.5rem; }
+.jeopardy-setup input, .jeopardy-setup select { padding: 0.35rem 0.5rem; border: 1px solid var(--jp-outline); border-radius: 6px; background: var(--jp-surface); color: var(--jp-text); }
+
+/* Light mode: make setup panel light blue with black text for clarity */
+@media (prefers-color-scheme: light) {
+  .jeopardy-setup { background: #E8F0FE; color: #000000; }
+  .jeopardy-setup .jp-field label { color: #000000; }
+  .jeopardy-setup input, .jeopardy-setup select { background: #FFFFFF; color: #000000; border-color: var(--jp-outline); }
+}
+
+/* Explicit light theme overrides (site theme toggles) */
+html.light-mode .jeopardy-setup,
+body.light-mode .jeopardy-setup,
+html[data-theme='light'] .jeopardy-setup,
+body[data-theme='light'] .jeopardy-setup,
+[data-mode='light'] .jeopardy-setup { background: #E8F0FE !important; color: #000000 !important; }
+html.light-mode .jeopardy-setup .jp-field label,
+body.light-mode .jeopardy-setup .jp-field label,
+html[data-theme='light'] .jeopardy-setup .jp-field label,
+body[data-theme='light'] .jeopardy-setup .jp-field label,
+[data-mode='light'] .jeopardy-setup .jp-field label { color: #000000 !important; }
+html.light-mode .jeopardy-setup input,
+body.light-mode .jeopardy-setup input,
+html[data-theme='light'] .jeopardy-setup input,
+body[data-theme='light'] .jeopardy-setup input,
+html.light-mode .jeopardy-setup select,
+body.light-mode .jeopardy-setup select,
+html[data-theme='light'] .jeopardy-setup select,
+body[data-theme='light'] .jeopardy-setup select,
+[data-mode='light'] .jeopardy-setup input,
+[data-mode='light'] .jeopardy-setup select { background: #FFFFFF !important; color: #000000 !important; border-color: var(--jp-outline) !important; }
+
+/* Resume prompt above setup */
+.jeopardy-resume-prompt {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--jp-outline);
+  border-radius: 8px;
+  background: var(--jp-surface);
+  box-shadow: var(--jp-shadow);
+  margin: 0.5rem 0 0.75rem;
+}
+.jeopardy-resume-actions { display: flex; gap: 0.5rem; }
+
+/* Light mode: make resume prompt light blue for consistency */
+@media (prefers-color-scheme: light) {
+  .jeopardy-resume-prompt { background: #E8F0FE; color: #000000; border-color: var(--jp-outline); }
+}
+
+/* Explicit light theme overrides */
+html.light-mode .jeopardy-resume-prompt,
+body.light-mode .jeopardy-resume-prompt,
+html[data-theme='light'] .jeopardy-resume-prompt,
+body[data-theme='light'] .jeopardy-resume-prompt,
+[data-mode='light'] .jeopardy-resume-prompt { background: #E8F0FE !important; color: #000000 !important; border-color: var(--jp-outline) !important; }
+
+/* Explicit dark theme overrides (site theme toggles and data-mode) */
+html.dark-mode .jeopardy-setup,
+body.dark-mode .jeopardy-setup,
+html[data-theme='dark'] .jeopardy-setup,
+body[data-theme='dark'] .jeopardy-setup,
+[data-mode='dark'] .jeopardy-setup { background: var(--jp-modal-bg) !important; color: var(--jp-modal-fg) !important; }
+html.dark-mode .jeopardy-setup .jp-field label,
+body.dark-mode .jeopardy-setup .jp-field label,
+html[data-theme='dark'] .jeopardy-setup .jp-field label,
+body[data-theme='dark'] .jeopardy-setup .jp-field label,
+[data-mode='dark'] .jeopardy-setup .jp-field label { color: var(--jp-text) !important; }
+html.dark-mode .jeopardy-setup input,
+body.dark-mode .jeopardy-setup input,
+html[data-theme='dark'] .jeopardy-setup input,
+body[data-theme='dark'] .jeopardy-setup input,
+html.dark-mode .jeopardy-setup select,
+body.dark-mode .jeopardy-setup select,
+html[data-theme='dark'] .jeopardy-setup select,
+body[data-theme='dark'] .jeopardy-setup select,
+[data-mode='dark'] .jeopardy-setup input,
+[data-mode='dark'] .jeopardy-setup select { background: var(--jp-surface) !important; color: var(--jp-text) !important; border-color: var(--jp-outline) !important; }
+
+html.dark-mode .jeopardy-resume-prompt,
+body.dark-mode .jeopardy-resume-prompt,
+html[data-theme='dark'] .jeopardy-resume-prompt,
+body[data-theme='dark'] .jeopardy-resume-prompt,
+[data-mode='dark'] .jeopardy-resume-prompt { background: var(--jp-modal-bg) !important; color: var(--jp-modal-fg) !important; border-color: var(--jp-outline) !important; }
+
+/* Container in explicit dark should use dark page tokens even if system prefers light */
+html.dark-mode .jeopardy-container,
+body.dark-mode .jeopardy-container,
+html[data-theme='dark'] .jeopardy-container,
+body[data-theme='dark'] .jeopardy-container,
+[data-mode='dark'] .jeopardy-container { background: var(--jp-bg) !important; color: var(--jp-text) !important; }
+
+[data-mode='dark'] .jeopardy-team { background: var(--jp-team-bg) !important; color: var(--jp-team-fg) !important; }
+[data-mode='dark'] .jeopardy-turn-indicator { background: var(--jp-surface) !important; color: var(--jp-text) !important; }
+[data-mode='dark'] .jeopardy-tile { background: var(--jp-tile-bg) !important; color: var(--jp-tile-fg) !important; }
+[data-mode='dark'] .jeopardy-modal-footer { background: var(--jp-secondary) !important; }
+[data-mode='dark'] .jeopardy-modal-header { background: var(--jp-header-bg) !important; color: var(--jp-header-fg) !important; }
+[data-mode='dark'] .jeopardy-modal { background: var(--jp-modal-bg) !important; color: var(--jp-modal-fg) !important; }

munchboka_edutools/static/css/pairPuzzle/style.css

@@ -0,0 +1,177 @@
+/* -----------------------------------------------------------------------------
+   Scoped, namespaced CSS variables: all vars prefixed with “--pp-”
+   and living only inside the .pairing-puzzle-container.
+   This avoids any clash with global or other modules’ variables.
+-----------------------------------------------------------------------------*/
+.pairing-puzzle-container {
+  /* light‐mode defaults */
+  --pp-background-color:       #f9f9f9;
+  --pp-border-color:           #ccc;
+  --pp-draggable-bg-color:     #ffffff;
+  --pp-container-bg-color:     #eeeeee84;
+  --pp-text-color:             #24292f;
+  --pp-primary-color:          #007bff;
+  --pp-hover-bg-color:         #e9ecef;
+  --pp-hover-border-color:     #0056b3;
+  --pp-placeholder-bg-color:   #bcbbbb;
+  --pp-placeholder-border-color:#999;
+  --pp-button-text-color:      black;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  border: 1px solid var(--pp-border-color);
+  border-radius: 8px;
+  background-color: var(--pp-background-color);
+}
+
+/* Dark Mode overrides, scoped to the container */
+[data-mode="dark"] .pairing-puzzle-container {
+  --pp-background-color:        #181818;
+  --pp-border-color:            #ccc;
+  --pp-draggable-bg-color:      #252d40;
+  --pp-container-bg-color:      #0f131b;
+  --pp-text-color:              #ffffff;
+  --pp-primary-color:           #007bff;
+  --pp-hover-bg-color:          #333333;
+  --pp-hover-border-color:      #0056b3;
+  --pp-placeholder-bg-color:    #000000;
+  --pp-placeholder-border-color:#999;
+  --pp-button-text-color:       black;
+}
+
+/* Auto Mode: light system theme */
+@media (prefers-color-scheme: light) {
+  [data-mode="auto"] .pairing-puzzle-container {
+    --pp-background-color:       #f9f9f9;
+    --pp-border-color:           #ccc;
+    --pp-draggable-bg-color:     #ffffff;
+    --pp-container-bg-color:     #d5d5d5;
+    --pp-text-color:             #24292f;
+    --pp-primary-color:          #007bff;
+    --pp-hover-bg-color:         #e9ecef;
+    --pp-hover-border-color:     #0056b3;
+    --pp-placeholder-bg-color:   #bcbbbb;
+    --pp-placeholder-border-color:#999;
+    --pp-button-text-color:      black;
+  }
+}
+
+/* Auto Mode: dark system theme */
+@media (prefers-color-scheme: dark) {
+  [data-mode="auto"] .pairing-puzzle-container {
+    --pp-background-color:        #181818;
+    --pp-border-color:            #ccc;
+    --pp-draggable-bg-color:      #252d40;
+    --pp-container-bg-color:      #0f131b;
+    --pp-text-color:              #ffffff;
+    --pp-primary-color:           #007bff;
+    --pp-hover-bg-color:          #333333;
+    --pp-hover-border-color:      #0056b3;
+    --pp-placeholder-bg-color:    #000000;
+    --pp-placeholder-border-color:#999;
+    --pp-button-text-color:       black;
+  }
+}
+
+/* -----------------------------------------------------------------------------
+   Component styles consuming the namespaced vars
+-----------------------------------------------------------------------------*/
+.pairing-puzzle-container .draggable-item {
+  background-color: var(--pp-draggable-bg-color);
+  color:            var(--pp-text-color);
+  border:           2px solid var(--pp-primary-color);
+  padding:          5px;
+  margin-bottom:    10px;
+  border-radius:    5px;
+  box-shadow:       0 4px 8px rgba(0,0,0,0.1);
+  cursor:           grab;
+  display:          inline-block;
+  white-space:      nowrap;
+  box-sizing:       border-box;
+  transition:       all 0.2s ease;
+}
+
+.pairing-puzzle-container .draggable-container {
+  display:          flex;
+  flex-wrap:        wrap;
+  gap:              10px;
+  justify-content:  flex-start;
+  align-items:      flex-start;
+  width:            100%;
+  padding:          10px 15px;
+  background-color: var(--pp-container-bg-color);
+  border:           2px solid var(--pp-primary-color);
+  border-radius:    5px;
+  box-shadow:       0 4px 8px rgba(0,0,0,0.1);
+}
+
+.pairing-puzzle-container .drop-zone {
+  background-color: var(--pp-draggable-bg-color);
+  border:           2px dashed var(--pp-primary-color);
+  padding:          10px;
+  border-radius:    8px;
+  display:          flex !important;
+  flex-wrap:        wrap;
+  justify-content:  center;
+  align-items:      center;
+  gap:              10px;
+  min-width:        120px;
+  flex:             0 1 auto;
+  box-sizing:       border-box;
+  margin-top:       10px;
+}
+
+.pairing-puzzle-container .drop-zone.dragover {
+  background-color: var(--pp-hover-bg-color);
+  border-color:     var(--pp-hover-border-color);
+}
+
+.pairing-puzzle-container .placeholder {
+  height:           50px;
+  margin-bottom:    5px;
+  background-color: var(--pp-placeholder-bg-color);
+  border:           1px dashed var(--pp-placeholder-border-color);
+  width:            100%;
+  padding:          5px;
+  box-sizing:       border-box;
+  text-align:       center;
+}
+
+.pairing-puzzle-container .button-container {
+  display:          flex;
+  justify-content:  center;
+  gap:              10px;
+  margin-top:       20px;
+}
+
+/* .pairing-puzzle-container .button {
+  padding:          10px 20px;
+  border-radius:    5px;
+  cursor:           pointer;
+  color:            var(--pp-button-text-color);
+  background:       var(--pp-primary-color);
+  border:           none;
+} */
+
+
+/* optional: code blocks inside draggable items */
+.pairing-puzzle-container .draggable-item pre,
+.pairing-puzzle-container .draggable-item code {
+  padding:     4px;
+  margin:      0;
+  font-size:   14px;
+  line-height: 1.4;
+  border-radius: 4px;
+}
+
+
+.drop-zone-container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-start;
+  align-items: stretch;
+}