opus-react 0.6.15 → 0.6.16

package/dist/index.css

@@ -25368,6 +25368,209 @@ button.opus_H9TUGj_root:hover, button.opus_H9TUGj_root:focus-visible {
   }
 }
 
+/* components/Asteroids/Asteroids.module.css */
+.opus_kcnl9Q_game {
+  color: #e2e8f0;
+  border: 1px solid color-mix(in srgb,var(--opus-color-accent, #3b82f6) 40%,#334155);
+  user-select: none;
+  background: #020617;
+  border-radius: 18px;
+  width: 100%;
+  max-width: 980px;
+  margin: auto;
+  overflow: hidden;
+  box-shadow: 0 22px 70px #02061773;
+}
+
+.opus_kcnl9Q_hud {
+  text-transform: uppercase;
+  letter-spacing: .12em;
+  color: #94a3b8;
+  background: #060b1a;
+  border-bottom: 1px solid #1e293b;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  height: 48px;
+  padding: 0 16px;
+  font: 600 12px / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
+  display: flex;
+}
+
+.opus_kcnl9Q_hudStats {
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  gap: clamp(20px, 7vw, 72px);
+  display: flex;
+}
+
+.opus_kcnl9Q_hud strong {
+  color: #f8fafc;
+  font-size: 14px;
+}
+
+.opus_kcnl9Q_hudButton {
+  color: #f8fafc;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  cursor: pointer;
+  background: #0f172a;
+  border: 1px solid #64748b;
+  border-radius: 8px;
+  flex-shrink: 0;
+  padding: 7px 11px;
+  font: 700 10px / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.opus_kcnl9Q_hudButton:hover {
+  background: #1e293b;
+  border-color: #f8fafc;
+}
+
+.opus_kcnl9Q_stage {
+  touch-action: none;
+  height: clamp(420px, 62vh, 680px);
+  position: relative;
+}
+
+.opus_kcnl9Q_canvas {
+  background: #020617;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.opus_kcnl9Q_overlay {
+  text-align: center;
+  backdrop-filter: blur(2px);
+  background: #02061794;
+  place-content: center;
+  justify-items: center;
+  display: grid;
+  position: absolute;
+  inset: 0;
+}
+
+.opus_kcnl9Q_overlay h2 {
+  text-transform: uppercase;
+  letter-spacing: .12em;
+  margin: 0;
+  font: 700 clamp(32px, 7vw, 72px) / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.opus_kcnl9Q_overlay p {
+  color: #94a3b8;
+}
+
+.opus_kcnl9Q_overlay button, .opus_kcnl9Q_controls button {
+  color: #f8fafc;
+  text-transform: uppercase;
+  cursor: pointer;
+  background: #0f172a;
+  border: 1px solid #64748b;
+  border-radius: 10px;
+  font: 700 14px / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.opus_kcnl9Q_overlay button {
+  padding: 13px 20px;
+}
+
+.opus_kcnl9Q_overlay button:hover, .opus_kcnl9Q_controls button:hover {
+  background: #1e293b;
+  border-color: #f8fafc;
+}
+
+.opus_kcnl9Q_controls {
+  border-top: 1px solid #1e293b;
+  grid-template-columns: repeat(3, 56px) 80px;
+  justify-content: center;
+  gap: 10px;
+  padding: 14px;
+  display: none;
+}
+
+.opus_kcnl9Q_controls button {
+  touch-action: none;
+  height: 52px;
+  font-size: 20px;
+}
+
+.opus_kcnl9Q_controls .opus_kcnl9Q_fire {
+  color: #fca5a5;
+  border-color: #ef4444;
+  margin-left: 14px;
+  font-size: 13px;
+}
+
+.opus_kcnl9Q_help {
+  text-align: center;
+  color: #64748b;
+  margin: 0;
+  padding: 10px 16px 14px;
+  font: 12px / 1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.opus_kcnl9Q_game[data-fullscreen="true"] {
+  z-index: 10000;
+  width: 100vw;
+  max-width: none;
+  height: 100vh;
+  box-shadow: none;
+  border: 0;
+  border-radius: 0;
+  flex-direction: column;
+  margin: 0;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.opus_kcnl9Q_game[data-fullscreen="true"] .opus_kcnl9Q_stage {
+  flex: 1;
+  height: auto;
+  min-height: 0;
+}
+
+.opus_kcnl9Q_game[data-fullscreen="true"] .opus_kcnl9Q_help {
+  display: none;
+}
+
+@media (pointer: coarse), (width <= 700px) {
+  .opus_kcnl9Q_controls {
+    display: grid;
+  }
+
+  .opus_kcnl9Q_stage {
+    height: clamp(360px, 52vh, 520px);
+  }
+
+  .opus_kcnl9Q_help {
+    display: none;
+  }
+}
+
+@media (width <= 480px) {
+  .opus_kcnl9Q_hudStats {
+    gap: 18px;
+    font-size: 10px;
+  }
+
+  .opus_kcnl9Q_controls {
+    grid-template-columns: repeat(3, 50px) 68px;
+  }
+
+  .opus_kcnl9Q_controls button {
+    height: 48px;
+  }
+
+  .opus_kcnl9Q_hudButton {
+    padding: 6px 8px;
+    font-size: 9px;
+  }
+}
+
 /* components/DesktopIcon/DesktopIcon.module.css */
 .opus_Aw_c1o_root {
   --desktop-icon-accent: var(--opus-accent);
@@ -26352,6 +26555,654 @@ button.opus_H9TUGj_root:hover, button.opus_H9TUGj_root:focus-visible {
   border-radius: 0;
 }
 
+/* components/JetSetWilly/JetSetWilly.module.css */
+.opus_1aWUVr_component {
+  color: #f8fafc;
+  background: #080808;
+  border: 1px solid #3f3f46;
+  border-radius: 18px;
+  width: 100%;
+  max-width: 900px;
+  margin: auto;
+  overflow: hidden;
+  box-shadow: 0 25px 80px #00000080;
+}
+
+.opus_1aWUVr_header {
+  background: linear-gradient(90deg, #18181b, #09090b);
+  border-bottom: 1px solid #3f3f46;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  padding: 16px 20px;
+  display: flex;
+}
+
+.opus_1aWUVr_header h2 {
+  margin: 3px 0 0;
+  font: 700 22px / 1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.opus_1aWUVr_kicker {
+  color: #facc15;
+  letter-spacing: .17em;
+  text-transform: uppercase;
+  font: 700 10px / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.opus_1aWUVr_actions {
+  gap: 8px;
+  display: flex;
+}
+
+.opus_1aWUVr_header button {
+  color: #fafafa;
+  cursor: pointer;
+  background: #27272a;
+  border: 1px solid #71717a;
+  border-radius: 8px;
+  padding: 9px 13px;
+}
+
+.opus_1aWUVr_screenShell {
+  background: radial-gradient(circle, #20202a, #030303 70%);
+  place-items: center;
+  min-height: 480px;
+  padding: 24px;
+  display: grid;
+  position: relative;
+}
+
+.opus_1aWUVr_canvas {
+  width: 512px;
+  max-width: 100%;
+  height: auto;
+  image-rendering: pixelated;
+  outline: 0;
+  display: block;
+  box-shadow: 0 0 0 2px #111, 0 0 32px #000c;
+}
+
+.opus_1aWUVr_canvas:focus {
+  box-shadow: 0 0 0 2px #facc15, 0 0 32px #facc152e;
+}
+
+.opus_1aWUVr_focusHint {
+  color: #71717a;
+  font: 10px / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
+  position: absolute;
+  bottom: 8px;
+}
+
+.opus_1aWUVr_instructions {
+  color: #a1a1aa;
+  border-top: 1px solid #27272a;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px 22px;
+  padding: 13px 18px;
+  font: 12px / 1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
+  display: flex;
+}
+
+.opus_1aWUVr_instructions strong {
+  color: #f8fafc;
+}
+
+.opus_1aWUVr_notice {
+  text-align: center;
+  color: #52525b;
+  margin: 0;
+  padding: 0 18px 14px;
+  font-size: 11px;
+}
+
+.opus_1aWUVr_component:fullscreen {
+  background: #000;
+  border: 0;
+  border-radius: 0;
+  flex-direction: column;
+  width: 100vw;
+  max-width: none;
+  height: 100vh;
+  margin: 0;
+  display: flex;
+}
+
+.opus_1aWUVr_component:fullscreen .opus_1aWUVr_screenShell {
+  flex: 1;
+  min-height: 0;
+  padding: 0;
+}
+
+.opus_1aWUVr_component:fullscreen .opus_1aWUVr_canvas {
+  aspect-ratio: 4 / 3;
+  width: min(100vw, 133.333vh - 189.333px);
+  max-width: none;
+  height: auto;
+  max-height: none;
+}
+
+.opus_1aWUVr_component:fullscreen .opus_1aWUVr_focusHint, .opus_1aWUVr_component:fullscreen .opus_1aWUVr_notice {
+  display: none;
+}
+
+@media (width <= 600px) {
+  .opus_1aWUVr_screenShell {
+    min-height: 300px;
+    padding: 10px;
+  }
+
+  .opus_1aWUVr_header {
+    align-items: flex-start;
+    padding: 12px;
+  }
+
+  .opus_1aWUVr_header h2 {
+    font-size: 18px;
+  }
+
+  .opus_1aWUVr_actions {
+    flex-direction: column;
+  }
+
+  .opus_1aWUVr_instructions {
+    gap: 8px 14px;
+  }
+}
+
+/* components/PacMan/Joystick.module.css */
+.opus_5bVNqU_joystickContainer {
+  touch-action: none;
+  user-select: none;
+  pointer-events: none;
+  z-index: 1000;
+  justify-content: center;
+  align-items: center;
+  width: 160px;
+  height: 160px;
+  display: flex;
+  position: fixed;
+}
+
+.opus_5bVNqU_joystickBase {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+
+.opus_5bVNqU_joystickRing {
+  backdrop-filter: blur(4px);
+  background: #0003;
+  border: 2px dashed #ffffff80;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+body:not(.dark-mode) .opus_5bVNqU_joystickRing {
+  background: #ffffff4d;
+  border-color: #1e3a8a99;
+}
+
+.opus_5bVNqU_joystickArc {
+  clip-path: polygon(25% 0, 75% 0, 75% 50%, 25% 50%);
+  background: none;
+  border: none;
+  border-radius: 50%;
+  width: 140px;
+  height: 140px;
+  position: absolute;
+}
+
+body:not(.dark-mode) .opus_5bVNqU_joystickArc {
+  border-color: #1e3a8a80;
+}
+
+.opus_5bVNqU_joystickArc:nth-child(3) {
+  clip-path: polygon(25% 0, 75% 0, 75% 50%, 25% 50%);
+  transform: rotate(180deg);
+}
+
+.opus_5bVNqU_joystickKnob {
+  pointer-events: none;
+  z-index: 10;
+  background: radial-gradient(circle at 30% 30%, #f0f0f0, #b4b4b4);
+  border: 2px solid #ffffff4d;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  width: 56px;
+  height: 56px;
+  margin-top: -28px;
+  margin-left: -28px;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-shadow: 0 4px 12px #0006, inset 0 2px 4px #fff9, inset 0 -2px 4px #0003;
+}
+
+.opus_5bVNqU_knobInner {
+  background: radial-gradient(circle at 35% 35%, #dcdcdce6, #a0a0a0b3);
+  border: 1px solid #fff3;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  box-shadow: inset 0 2px 4px #ffffff80, inset 0 -1px 2px #0000004d;
+}
+
+.opus_5bVNqU_knobHighlight {
+  pointer-events: none;
+  background: radial-gradient(circle at 30% 30%, #fffc, #fff0);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 20%;
+  left: 25%;
+}
+
+@media (width <= 520px) {
+  .opus_5bVNqU_joystickContainer {
+    width: 140px;
+    height: 140px;
+  }
+
+  .opus_5bVNqU_joystickArc {
+    width: 120px;
+    height: 120px;
+  }
+
+  .opus_5bVNqU_joystickRing {
+    border-width: 1.5px;
+  }
+
+  .opus_5bVNqU_joystickKnob {
+    width: 52px;
+    height: 52px;
+    margin-top: -26px;
+    margin-left: -26px;
+  }
+
+  .opus_5bVNqU_knobInner {
+    width: 30px;
+    height: 30px;
+  }
+
+  .opus_5bVNqU_knobHighlight {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+/* components/PacMan/PacMan.module.css */
+.opus_KL4dkl_container {
+  color: #f8fafc;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+  background: none;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  height: auto;
+  padding: 0;
+  display: flex;
+}
+
+body:not(.dark-mode) .opus_KL4dkl_container {
+  color: #e8e1d6;
+  background: none;
+}
+
+.opus_KL4dkl_container * {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
+.opus_KL4dkl_header {
+  text-align: center;
+  z-index: 1001;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  display: flex;
+  position: relative;
+}
+
+.opus_KL4dkl_headerContent {
+  flex-direction: column;
+  gap: 4px;
+  display: flex;
+}
+
+.opus_KL4dkl_title {
+  letter-spacing: -.02em;
+  color: inherit;
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  display: none;
+}
+
+body:not(.dark-mode) .opus_KL4dkl_title {
+  color: #1e3a8a;
+}
+
+.opus_KL4dkl_subtitle {
+  color: #94a3b8;
+  margin: 0;
+  font-size: .875rem;
+  font-weight: 400;
+  display: none;
+}
+
+body:not(.dark-mode) .opus_KL4dkl_subtitle {
+  color: #64748b;
+}
+
+.opus_KL4dkl_buttonContainer {
+  z-index: 1001;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  position: relative;
+}
+
+.opus_KL4dkl_startGameButton {
+  color: #fff;
+  cursor: pointer;
+  letter-spacing: .02em;
+  z-index: 1002;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  border: none;
+  border-radius: 8px;
+  min-width: 120px;
+  padding: 10px 24px;
+  font-size: .875rem;
+  font-weight: 600;
+  transition: all .2s;
+  position: relative;
+  box-shadow: 0 2px 8px #10b9814d;
+}
+
+.opus_KL4dkl_startGameButton:hover {
+  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px #10b98180;
+}
+
+.opus_KL4dkl_startGameButton:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px #10b98166;
+}
+
+.opus_KL4dkl_newGameButton {
+  color: #fff;
+  cursor: pointer;
+  letter-spacing: .02em;
+  z-index: 1002;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  border: none;
+  border-radius: 8px;
+  min-width: 120px;
+  padding: 10px 24px;
+  font-size: .875rem;
+  font-weight: 600;
+  transition: all .2s;
+  position: relative;
+  box-shadow: 0 2px 8px #3b82f64d;
+}
+
+.opus_KL4dkl_newGameButton:hover {
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px #3b82f680;
+}
+
+.opus_KL4dkl_newGameButton:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px #3b82f666;
+}
+
+.opus_KL4dkl_fullscreenButton {
+  color: #f8fafc;
+  cursor: pointer;
+  letter-spacing: .02em;
+  z-index: 1002;
+  background: #0f172ad9;
+  border: 1px solid #94a3b873;
+  border-radius: 8px;
+  min-width: 120px;
+  padding: 10px 16px;
+  font-size: .875rem;
+  font-weight: 600;
+  transition: all .2s;
+  position: relative;
+}
+
+.opus_KL4dkl_fullscreenButton:hover {
+  background: #1e293bf2;
+  border-color: #f8fafcbf;
+}
+
+.opus_KL4dkl_closeButton {
+  color: #f1f5f9;
+  cursor: pointer;
+  background: #0f172ab3;
+  border: 1px solid #94a3b866;
+  border-radius: 999px;
+  padding: 8px 14px;
+  font-weight: 600;
+}
+
+.opus_KL4dkl_closeButton:hover {
+  background: #1e293be6;
+}
+
+.opus_KL4dkl_statsRow {
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 12px;
+  display: grid;
+}
+
+.opus_KL4dkl_statBox {
+  background: #0f172ab3;
+  border: 1px solid #3b82f64d;
+  border-radius: 12px;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  display: flex;
+}
+
+.opus_KL4dkl_statLabel {
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #94a3b8;
+  font-size: .75rem;
+}
+
+.opus_KL4dkl_statValue {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+  font-size: clamp(.95rem, 3.2vw, 1.1rem);
+  font-weight: 700;
+}
+
+.opus_KL4dkl_actions {
+  flex-wrap: wrap;
+  gap: 12px;
+  display: flex;
+}
+
+.opus_KL4dkl_actionButton {
+  color: #fff;
+  cursor: pointer;
+  background: linear-gradient(120deg, #3b82f6, #06b6d4);
+  border: none;
+  border-radius: 999px;
+  padding: 10px 18px;
+  font-weight: 600;
+}
+
+.opus_KL4dkl_actionButton[aria-pressed="true"] {
+  background: #0f172ae6;
+  border: 1px solid #3b82f6;
+}
+
+.opus_KL4dkl_canvasWrapper {
+  contain: layout style paint;
+  will-change: contents;
+  background: none;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: calc(100vh - 330px);
+  margin: 0;
+  padding: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.opus_KL4dkl_canvas {
+  contain: layout style paint;
+  opacity: .95;
+  object-fit: contain;
+  background: none;
+  width: min(100%, 100vh - 330px);
+  max-width: min(100vw, 100vh - 330px);
+  height: min(100%, 100vh - 330px);
+  max-height: min(100vh - 330px, 100vw);
+  display: block;
+}
+
+.opus_KL4dkl_controlRow {
+  gap: 12px;
+  display: flex;
+}
+
+.opus_KL4dkl_controlButton {
+  color: #f8fafc;
+  background: #0f172acc;
+  border: 1px solid #60a5fa80;
+  border-radius: 16px;
+  width: 64px;
+  height: 64px;
+  font-size: 1.25rem;
+}
+
+@media (width >= 900px) {
+  .opus_KL4dkl_container {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+
+@media (width <= 520px) {
+  .opus_KL4dkl_container {
+    padding: 0;
+  }
+
+  .opus_KL4dkl_canvasWrapper {
+    height: calc(100vh - 280px);
+    margin: 0;
+    padding: 0;
+  }
+
+  .opus_KL4dkl_canvas {
+    width: min(100%, 100vh - 280px);
+    max-width: min(100vw, 100vh - 280px);
+    height: min(100%, 100vh - 280px);
+    max-height: min(100vh - 280px, 100vw);
+  }
+
+  .opus_KL4dkl_header {
+    text-align: center;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .opus_KL4dkl_subtitle {
+    font-size: clamp(.7rem, 3.8vw, .8rem);
+  }
+
+  .opus_KL4dkl_statsRow {
+    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
+    gap: 8px;
+  }
+
+  .opus_KL4dkl_statBox {
+    padding: 8px 10px;
+  }
+
+  .opus_KL4dkl_statLabel {
+    font-size: .65rem;
+  }
+
+  .opus_KL4dkl_statValue {
+    font-size: clamp(.85rem, 4.2vw, 1rem);
+  }
+
+  .opus_KL4dkl_startGameButton, .opus_KL4dkl_newGameButton, .opus_KL4dkl_fullscreenButton {
+    min-width: 96px;
+    padding: 8px 14px;
+    font-size: .825rem;
+  }
+
+  .opus_KL4dkl_controlButton {
+    width: 56px;
+    height: 56px;
+    font-size: 1.05rem;
+  }
+}
+
+.opus_KL4dkl_container[data-fullscreen="true"] {
+  z-index: 10000;
+  background: #020617;
+  flex-direction: column;
+  width: 100vw;
+  max-width: none;
+  height: 100vh;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.opus_KL4dkl_container[data-fullscreen="true"] .opus_KL4dkl_buttonContainer {
+  flex-shrink: 0;
+  padding: 12px 16px 0;
+}
+
+.opus_KL4dkl_container[data-fullscreen="true"] .opus_KL4dkl_canvasWrapper {
+  flex: 1;
+  width: 100%;
+  height: auto;
+  min-height: 0;
+  padding: 12px;
+}
+
+.opus_KL4dkl_container[data-fullscreen="true"] .opus_KL4dkl_canvas {
+  width: min(100%, 100vh - 96px);
+  max-width: min(100vw - 24px, 100vh - 96px);
+  height: min(100%, 100vh - 96px);
+  max-height: min(100vh - 96px, 100vw - 24px);
+}
+
 /* components/FontPicker/FontPicker.module.css */
 .opus_ub1fhz_field {
   align-items: center;