@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Staatliches";
  src: url("../fonts/staatliches.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #202326;
  --muted: #6c6860;
  --soft: #8d877d;
  --canvas: #ece8df;
  --panel: #fffdf8;
  --panel-2: #f7f3eb;
  --line: #d9d0c2;
  --line-strong: #bfb3a4;
  --charcoal: #272523;
  --charcoal-2: #34302b;
  --accent: #b66d3a;
  --accent-dark: #834620;
  --teal: #237875;
  --wine: #8b3f53;
  --leaf: #587b46;
  --focus: #2f70b7;
  --danger: #a33b34;
  --shadow: 0 18px 45px rgba(53, 43, 32, 0.12);
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  letter-spacing: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.86), rgba(236, 232, 223, 0.9)),
    repeating-linear-gradient(0deg, rgba(34, 30, 25, 0.03) 0 1px, transparent 1px 28px);
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
label.file-button:focus-within {
  outline: 3px solid rgba(47, 112, 183, 0.28);
  outline-offset: 2px;
}

.icon-sprite {
  display: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

body.is-auth-screen .app-shell {
  grid-template-columns: 1fr;
}

body.is-auth-screen .sidebar,
body.is-auth-screen .topbar {
  display: none;
}

body.is-auth-screen .workspace {
  min-height: 100vh;
}

.sidebar {
  background: linear-gradient(180deg, var(--charcoal), var(--charcoal-2));
  color: #f8f1e7;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fffdf8;
  font-weight: 800;
  background: url('dashboard-assets/ecr-icon2.png');
  background-size: contain;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-size: 15px;
}

.brand span {
  color: rgba(248, 241, 231, 0.68);
  font-size: 12px;
  margin-top: 2px;
}

.side-nav {
  display: grid;
  gap: 6px;
}

.nav-button {
  border: 0;
  background: transparent;
  color: rgba(248, 241, 231, 0.74);
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: left;
}

.nav-button svg,
.button svg,
.icon-button svg,
.file-button svg,
.mini-action svg,
.section-title svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.nav-button:hover,
.nav-button.is-active {
  background: rgba(255, 253, 248, 0.1);
  color: #fffdf8;
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(248, 241, 231, 0.18);
  padding-top: 16px;
  color: rgba(248, 241, 231, 0.7);
  font-size: 12px;
}

.sidebar-footer strong {
  display: block;
  color: #fffdf8;
  font-size: 14px;
  margin-top: 4px;
}

.workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.78);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  flex-wrap: wrap;
}

.crumbs strong {
  color: var(--ink);
  font-size: 18px;
}

.crumb-link {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  min-height: 24px;
}

.crumb-link:hover {
  color: var(--accent-dark);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
}

.screen {
  padding: 26px 28px 42px;
  width: min(1480px, 100%);
}

body.is-auth-screen .screen,
.standalone-preview-body.is-auth-screen .standalone-screen {
  width: 100%;
  min-height: 100vh;
  padding: 0;
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.auth-card {
  width: min(460px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 24px;
  display: grid;
  gap: 18px;
}

.auth-brand {
  color: var(--ink);
}

.auth-brand span:not(.brand-mark) {
  color: var(--muted);
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-error {
  border: 1px solid rgba(163, 59, 52, 0.32);
  background: rgba(163, 59, 52, 0.08);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.auth-submit {
  width: 100%;
}

.screen-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.screen-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.12;
}

.screen-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 760px;
}

.games-header-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
}

.user-chip small,
.user-chip strong {
  color: var(--muted);
  font-weight: 700;
}

.compact-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.generation-video-options {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
}

.generation-video-options .compact-field {
  min-width: 120px;
}

.generation-loop-check {
  min-height: 38px;
}

.button,
.file-button,
.mini-action {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}

.button:hover,
.file-button:hover,
.mini-action:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fffdf8;
}

.button.primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fffdf8;
}

.button.ghost {
  background: transparent;
}

.button.danger {
  border-color: rgba(163, 59, 52, 0.38);
  color: var(--danger);
}

.button.danger:hover {
  border-color: var(--danger);
  background: rgba(163, 59, 52, 0.08);
  color: var(--danger);
}

.file-button input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.file-button {
  position: relative;
}

.file-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.52;
  pointer-events: none;
}

.icon-button {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}

.icon-button:hover {
  color: var(--danger);
  border-color: rgba(163, 59, 52, 0.4);
}

.icon-button.text-icon {
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.icon-button.ai-action:hover {
  color: var(--accent-dark);
  border-color: rgba(182, 109, 58, 0.45);
}

.reorder-button:hover,
.reorder-button:focus-visible {
  color: var(--accent-dark);
  border-color: rgba(182, 109, 58, 0.45);
}

.reorder-button.is-up svg {
  transform: rotate(180deg);
}

.hotspot-order-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.grid-games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}

.game-status-groups {
  display: grid;
  gap: 26px;
}

.game-status-section {
  display: grid;
  gap: 12px;
}

.game-status-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  border-bottom: 1px solid var(--line);
}

.game-status-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.game-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px;
  text-align: left;
  min-height: 306px;
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  box-shadow: var(--shadow);
}

.game-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.game-card-media {
  position: relative;
  display: block;
  width: 154px;
  height: 274px;
}

.game-card-media .game-icon {
  width: 154px;
  height: 274px;
  font-size: 34px;
}

.game-card-media .status-pill {
  position: absolute;
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.game-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-icon,
.persona-avatar {
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fffdf8;
  font-weight: 800;
  overflow: hidden;
}

.game-icon {
  width: 54px;
  height: 96px;
  font-size: 17px;
  flex: 0 0 auto;
}

.game-icon img,
.persona-avatar img,
.item-icon img,
.room-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.status-pill,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eee3d6;
  color: #5f4b37;
  font-size: 12px;
}

.status-pill.is-green {
  background: #e3eddf;
  color: #385b32;
}

.status-pill.is-blue {
  background: #ddebea;
  color: #245c5a;
}

.status-pill.is-wine {
  background: #f0dfe4;
  color: #703245;
}

.game-card h3,
.mini-card h3 {
  margin: 0;
  font-size: 18px;
}

.game-card p,
.mini-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.game-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.game-card-meta {
  display: grid;
  gap: 2px;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.35;
}

.stats-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--soft);
  font-size: 13px;
}

.game-card .stats-row {
  margin-top: auto;
}

.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(330px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.game-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: -4px 0 18px;
  overflow-x: auto;
}

.tab-button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  white-space: nowrap;
}

.tab-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab-button:hover {
  color: var(--accent-dark);
}

.tab-button.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 760;
}

.tab-panel {
  display: grid;
  gap: 18px;
}
/*
.settings-tab-layout,
.flow-tab-layout,
.rooms-tab-layout,
.intro-outro-layout {
  max-width: 980px;
}
*/
.flow-tab-layout {
  max-width: none;
}

.flow-tab-layout.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  max-width: none;
  background: #f8f6f1;
}

.flow-fullscreen-topbar {
  min-height: 68px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.92);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
}

.flow-fullscreen-body {
  min-height: 0;
  flex: 1 1 auto;
}

.flow-canvas-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(52, 48, 43, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 48, 43, 0.06) 1px, transparent 1px),
    #f8f6f1;
  background-size: 28px 28px;
  min-height: 620px;
  overflow: hidden;
}

.flow-tab-layout.is-fullscreen .flow-canvas-shell {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.flow-canvas-scroll {
  width: 100%;
  height: 620px;
  overflow: auto;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.flow-tab-layout.is-fullscreen .flow-canvas-scroll {
  height: 100%;
}

.flow-canvas-scroll::-webkit-scrollbar {
  display: none;
}

.flow-canvas-scroll.is-panning,
.flow-canvas-scroll.is-panning * {
  cursor: grabbing !important;
  user-select: none;
}

.flow-canvas-scroll.is-connecting,
.flow-canvas-scroll.is-connecting * {
  cursor: crosshair !important;
}

.flow-world {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.flow-transform {
  position: absolute;
  inset: 0 auto auto 0;
  transform-origin: 0 0;
}

.flow-arrows {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.flow-arrows marker path {
  fill: rgba(52, 48, 43, 0.72);
}

.flow-arrow-path {
  fill: none;
  stroke: rgba(52, 48, 43, 0.72);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.flow-arrow-path.is-draft {
  stroke: rgba(139, 63, 83, 0.62);
  stroke-dasharray: 8 7;
  marker-end: none;
}

.flow-node {
  position: absolute;
  width: 210px;
  min-height: 136px;
  z-index: 3;
  border: 1px solid rgba(52, 48, 43, 0.18);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 16px 32px rgba(52, 48, 43, 0.13);
  padding: 10px 10px 9px 38px;
  display: grid;
  gap: 6px;
  cursor: default;
}

.flow-node.is-room {
  border-color: rgba(35, 120, 117, 0.34);
}

.flow-node.is-dialogue {
  border-color: rgba(139, 63, 83, 0.32);
}

.flow-node.is-mini-game {
  border-color: rgba(182, 109, 58, 0.38);
}

.flow-node.is-selected {
  border-color: var(--accent-dark);
  box-shadow:
    0 0 0 3px rgba(35, 120, 117, 0.18),
    0 16px 32px rgba(52, 48, 43, 0.13);
}

.flow-node.is-selected .flow-node-drag {
  background: rgba(35, 120, 117, 0.14);
  color: var(--accent-dark);
}

.flow-node-drag {
  position: absolute;
  left: 8px;
  top: 10px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(52, 48, 43, 0.08);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: grab;
}

.flow-node-drag:active {
  cursor: grabbing;
}

.flow-node-port {
  position: absolute;
  left: 50%;
  z-index: 5;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 2px solid #fffdf8;
  border-radius: 999px;
  background: var(--accent-dark);
  box-shadow: 0 7px 14px rgba(52, 48, 43, 0.22);
  transform: translateX(-50%);
  cursor: crosshair;
}

.flow-node-port.is-top {
  top: -9px;
  background: #237875;
}

.flow-node-port.is-bottom {
  bottom: -9px;
  background: #8b3f53;
}

.flow-node-port:hover,
.flow-node-port:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(35, 120, 117, 0.18), 0 7px 14px rgba(52, 48, 43, 0.22);
}

.flow-node-drag svg,
.flow-node-type svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.flow-node-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.flow-node-source-label {
  color: #2b9d55;
  font-weight: 920;
}

.flow-node-title {
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  text-align: left;
  font-size: 15px;
  font-weight: 840;
  line-height: 1.2;
  cursor: pointer;
}

.flow-node-summary {
  min-height: 34px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.flow-node-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.flow-connection-filter {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border: 1px solid rgba(52, 48, 43, 0.2);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--accent-dark);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(52, 48, 43, 0.14);
  font-weight: 900;
  font-family: Georgia, serif;
}

.flow-add-context-menu {
  position: absolute;
  z-index: 7;
  width: 196px;
  padding: 8px;
  border: 1px solid rgba(52, 48, 43, 0.2);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 18px 38px rgba(52, 48, 43, 0.22);
  display: grid;
  gap: 7px;
}

.flow-add-context-title {
  padding: 2px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 860;
  text-transform: uppercase;
  letter-spacing: 0;
}

.flow-add-context-options {
  display: grid;
  gap: 4px;
}

.flow-context-menu {
  gap: 4px;
}

.flow-context-submenu {
  position: relative;
}

.flow-add-context-options button,
.flow-context-parent,
.flow-context-submenu-panel button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.flow-add-context-options button:hover,
.flow-add-context-options button:focus-visible,
.flow-context-parent:hover,
.flow-context-parent:focus-visible,
.flow-context-submenu-panel button:hover,
.flow-context-submenu-panel button:focus-visible {
  outline: 0;
  background: rgba(35, 120, 117, 0.1);
}

.flow-add-context-options button:disabled,
.flow-context-submenu-panel button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.flow-add-context-options button:disabled:hover,
.flow-context-submenu-panel button:disabled:hover {
  background: transparent;
}

.flow-context-parent {
  width: 100%;
}

.flow-context-arrow {
  margin-left: auto;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.flow-context-submenu-panel {
  position: absolute;
  top: -8px;
  left: calc(100% + 6px);
  width: 196px;
  padding: 8px;
  border: 1px solid rgba(52, 48, 43, 0.2);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 18px 38px rgba(52, 48, 43, 0.22);
  display: none;
  gap: 4px;
}

.flow-context-submenu:hover .flow-context-submenu-panel,
.flow-context-submenu:focus-within .flow-context-submenu-panel {
  display: grid;
}

.flow-add-context-options svg,
.flow-context-parent svg,
.flow-context-submenu-panel svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex: 0 0 auto;
}

.flow-node-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 20px;
}

.flow-node-modal .modal-header {
  position: relative;
}

.flow-node-modal .modal-header .icon-button {
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
}

.flow-node-modal .modal-header {
  margin-bottom: 18px;
}

@media (max-width: 760px) {
  .flow-canvas-scroll {
    height: 560px;
  }
}

.settings-tab-layout.stack {
  display: grid;
  gap: 18px;
}

.is-disabled-panel {
  opacity: 0.78;
}

.users-table {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.users-table-head,
.users-table-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) minmax(180px, 1.3fr) minmax(120px, 0.75fr) minmax(130px, 0.9fr) minmax(160px, 1fr);
  gap: 10px;
  align-items: center;
}

.users-table-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  padding: 0 10px;
}

.users-table-row {
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  padding: 10px;
}

.users-table-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-filter-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}

.collection-analytics-tabs {
  margin-bottom: 18px;
}

.collection-analytics-panel {
  display: grid;
  gap: 18px;
}

.inline-panel-header {
  padding: 0;
  border: 0;
}

.analytics-filter-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) auto;
  gap: 12px;
  align-items: end;
}

.analytics-game-multi-select {
  width: 100%;
}

.analytics-game-multi-select .item-multi-dropdown {
  max-height: 390px;
}

.analytics-chart,
.analytics-table-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  padding: 14px;
}

.analytics-chart {
  display: grid;
  gap: 10px;
  overflow-x: auto;
}

.analytics-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.analytics-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 740;
}

.analytics-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.analytics-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.analytics-chart-svg {
  width: 100%;
  min-width: 720px;
  height: auto;
}

.analytics-chart-axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.analytics-chart-label,
.analytics-chart-date {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.analytics-table-block {
  display: grid;
  gap: 10px;
}

.section-title.compact {
  font-size: 13px;
}

.analytics-summary-table,
.analytics-games-table {
  display: grid;
  gap: 8px;
}

.analytics-table-head,
.analytics-table-row {
  display: grid;
  gap: 10px;
  align-items: center;
}

.analytics-summary-table .analytics-table-head,
.analytics-summary-table .analytics-table-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analytics-games-table .analytics-table-head,
.analytics-games-table .analytics-table-row {
  grid-template-columns: minmax(220px, 1.4fr) minmax(100px, 0.5fr) minmax(140px, 0.6fr) minmax(100px, 0.5fr);
}

.analytics-table-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.analytics-table-row {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.analytics-table-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.events-table {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.events-table-head,
.events-table-row {
  display: grid;
  grid-template-columns: minmax(145px, 0.9fr) minmax(190px, 1.1fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(150px, 0.85fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: center;
}

.events-table-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  padding: 0 10px;
}

.events-table-row {
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  padding: 10px;
}

.events-table-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.events-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.events-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.pagination-gap {
  color: var(--muted);
  padding: 0 3px;
}

.field.compact {
  max-width: 170px;
}

.inline-actions.align-end {
  align-self: end;
}

@media (max-width: 960px) {
  .event-filter-panel {
    grid-template-columns: 1fr;
  }

  .analytics-filter-panel {
    grid-template-columns: 1fr;
  }

  .analytics-chart-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .analytics-chart-legend {
    justify-content: flex-start;
  }

  .analytics-summary-table,
  .analytics-games-table {
    overflow-x: auto;
  }

  .analytics-summary-table .analytics-table-head,
  .analytics-summary-table .analytics-table-row {
    min-width: 660px;
  }

  .analytics-games-table .analytics-table-head,
  .analytics-games-table .analytics-table-row {
    min-width: 760px;
  }

  .events-table {
    overflow-x: auto;
  }

  .events-table-head,
  .events-table-row {
    min-width: 1020px;
  }

  .events-table-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .events-pagination {
    justify-content: flex-start;
  }
}

.collection-list {
  display: grid;
  gap: 8px;
}

.collection-list-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.collection-game-adder {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.collection-games-table {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.collection-games-head,
.collection-games-row {
  display: grid;
  grid-template-columns: 74px minmax(160px, 1.2fr) minmax(130px, 0.75fr) minmax(230px, 1fr) minmax(90px, auto) minmax(120px, auto);
  gap: 10px;
  align-items: center;
}

.collection-games-table.is-no-options .collection-games-head,
.collection-games-table.is-no-options .collection-games-row {
  grid-template-columns: 74px minmax(180px, 1.4fr) minmax(130px, 0.75fr) minmax(90px, auto) minmax(120px, auto);
}

.collection-games-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  padding: 0 10px;
}

.collection-games-row {
  min-height: 118px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.collection-game-icon .game-icon {
  width: 54px;
  height: 96px;
  font-size: 16px;
}

.collection-game-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
}

.collection-game-option {
  min-width: 0;
}

.collection-game-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-collectables-table {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.collection-collectables-head,
.collection-collectables-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.85fr) minmax(90px, 0.45fr) minmax(160px, 1fr) minmax(260px, 1.4fr) minmax(110px, auto);
  gap: 10px;
  align-items: center;
}

.collection-collectables-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  padding: 0 10px;
}

.collection-collectables-row {
  min-height: 48px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.collection-collectable-sprite {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.collection-collectable-thumb {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
  color: var(--muted);
}

.collection-collectable-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.collection-collectable-sprite-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.collection-collectable-sprite-copy strong,
.collection-collectable-sprite-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-collectable-sprite-copy em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.collection-template-assets,
.collection-color-groups {
  display: grid;
  gap: 12px;
}

.collection-template-asset-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.collection-template-thumb {
  width: 150px;
  aspect-ratio: var(--template-thumb-aspect, 16 / 9);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
}

.collection-template-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.collection-template-thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.collection-template-asset-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  justify-items: start;
}

.collection-template-asset-copy strong,
.collection-template-asset-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-template-asset-copy em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.collection-template-asset-row input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.collection-color-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.collection-color-group h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.collection-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.collection-color-control {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.collection-color-control input[type="color"] {
  inline-size: 46px;
  block-size: 38px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
}

.compact-check {
  min-height: 0;
}

.monospace-input {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
}

.intro-outro-layout {
  display: grid;
  gap: 18px;
}

.scenario-tab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.assets-tab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 18px;
  align-items: start;
}

.asset-tab-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.asset-browser-panel,
.asset-preview-panel {
  min-width: 0;
}

.asset-browser-panel,
.ai-asset-preview {
  overflow: visible;
}

.asset-filter-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
}

.asset-filter-group {
  display: grid;
  gap: 8px;
}

.asset-combo {
  position: relative;
}

.asset-combo-summary {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  background: #fffefb;
  border-radius: 8px;
  padding: 8px 34px 8px 10px;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  list-style: none;
}

.asset-combo-summary::-webkit-details-marker {
  display: none;
}

.asset-combo-summary::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}

.asset-combo[open] .asset-combo-summary {
  border-color: var(--accent);
}

.asset-combo[open] .asset-combo-summary::after {
  top: 18px;
  transform: rotate(225deg);
}

.asset-combo-menu {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  top: calc(100% + 4px);
  max-block-size: 260px;
  overflow: auto;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  box-shadow: 0 18px 34px rgba(39, 37, 35, 0.14);
}

.asset-combo-option {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
}

.asset-combo-option:hover {
  background: var(--panel-2);
}

.asset-combo-option.is-select-all {
  border-bottom: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
  margin-bottom: 4px;
  padding-bottom: 8px;
  font-weight: 760;
}

.asset-list {
  display: grid;
  gap: 10px;
  min-height: 200px;
  max-block-size: min(64vh, 680px);
  overflow: auto;
  padding-right: 4px;
  align-content: start;
}

.asset-list.is-compact {
  max-block-size: min(42vh, 420px);
}

.missing-assets-list {
  display: grid;
  gap: 8px;
  max-block-size: min(64vh, 680px);
  overflow: auto;
  padding-right: 4px;
  align-content: start;
}

.missing-asset-row {
  display: grid;
  grid-template-columns: auto 74px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  cursor: pointer;
}

.missing-asset-row.is-blocked {
  opacity: 0.62;
  cursor: not-allowed;
}

.missing-asset-type {
  display: inline-grid;
  min-block-size: 26px;
  place-items: center;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.missing-asset-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.missing-asset-main strong,
.missing-asset-main span,
.missing-asset-main em {
  overflow-wrap: anywhere;
}

.missing-asset-main span,
.missing-asset-main em {
  color: var(--muted);
  font-size: 12px;
}

.missing-preview-icon {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
}

.missing-preview-icon svg {
  width: 42px;
  height: 42px;
}

.asset-card {
  border: 1px solid var(--line);
  background: #fffefb;
  color: var(--ink);
  border-radius: 8px;
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
  overflow: hidden;
}

.asset-card:hover,
.asset-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(53, 43, 32, 0.1);
}

.asset-card.is-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 100px;
}

.asset-card.is-compact .asset-card-side {
  display: none;
}

.asset-card-select {
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.asset-card-select:hover,
.asset-card-select:focus-visible {
  outline: none;
}

.asset-card.is-compact .asset-card-select {
  grid-template-columns: 58px minmax(0, 1fr);
}

.asset-card-side {
  min-width: 106px;
  padding: 10px 10px 10px 0;
  display: grid;
  gap: 8px;
  justify-items: end;
  align-content: center;
}

.asset-thumb {
  width: 82px;
  height: 62px;
  border-radius: 8px;
  background: var(--panel-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.asset-card.is-compact .asset-thumb {
  width: 58px;
  height: 48px;
}

.asset-card-full-scale {
  border: 1px solid rgba(45, 90, 99, 0.28);
  background: #eef6f5;
  color: var(--teal);
  border-radius: 999px;
  min-height: 28px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

.asset-card-full-scale svg {
  width: 13px;
  height: 13px;
}

.asset-thumb img,
.asset-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-thumb .editor-media-preview-inline,
.asset-thumb .editor-media-preview-inline > img,
.asset-thumb .editor-media-preview-inline > video,
.asset-thumb .editor-media-preview-inline > .asset-sound-thumb {
  width: 100%;
  height: 100%;
}

.asset-sound-thumb {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--teal);
}

.asset-card-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.asset-card-body strong,
.asset-card-body em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card-body em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.asset-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag.is-unused {
  border-color: rgba(163, 59, 52, 0.32);
  color: var(--danger);
}

.asset-preview-detail {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.asset-preview-image-button {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  inline-size: 100%;
  cursor: zoom-in;
}

.asset-preview-media {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(52vh, 420px);
  justify-self: center;
  object-fit: contain;
  border-radius: 8px;
  background: #111;
}

.asset-preview-plus {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.62);
  color: #fffdf8;
  font-size: 42px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}

.asset-preview-image-button:hover .asset-preview-plus,
.asset-preview-image-button:focus-visible .asset-preview-plus {
  opacity: 1;
}

.asset-preview-audio {
  width: 100%;
}

.editor-media-preview-button {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 8px;
  cursor: zoom-in;
  min-width: 0;
}

.editor-media-preview-button.is-fill {
  inline-size: 100%;
}

.editor-media-preview-button.is-inline {
  inline-size: fit-content;
}

.editor-media-preview-inline {
  position: relative;
  display: inline-grid;
  place-items: center;
  cursor: zoom-in;
  border-radius: 8px;
}

.editor-media-preview-inline.is-icon-preview {
  flex: 0 0 auto;
}

.editor-media-preview-inline.is-asset-thumb-preview {
  width: 100%;
  height: 100%;
}

.editor-media-preview-button > img,
.editor-media-preview-button > video,
.editor-media-preview-button > .room-thumb,
.editor-media-preview-button > .mini-asset-thumb,
.editor-media-preview-inline > .game-icon,
.editor-media-preview-inline > .persona-avatar,
.editor-media-preview-inline > .item-icon {
  grid-area: 1 / 1;
}

.editor-media-preview-plus {
  grid-area: 1 / 1;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.62);
  color: #fffdf8;
  font-size: 28px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}

.editor-media-preview-button:hover .editor-media-preview-plus,
.editor-media-preview-button:focus-visible .editor-media-preview-plus,
.editor-media-preview-inline:hover .editor-media-preview-plus,
.editor-media-preview-inline:focus-visible .editor-media-preview-plus {
  opacity: 1;
}

.asset-fullscreen-backdrop {
  background: rgba(0, 0, 0, 0.86);
  z-index: 80;
}

.asset-fullscreen-modal {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px;
  overflow: hidden;
}

.asset-fullscreen-modal img,
.asset-fullscreen-modal video {
  max-width: 100%;
  max-height: calc(100vh - 96px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

.asset-fullscreen-modal video {
  background: #000;
}

.editor-media-audio-fullscreen {
  width: min(720px, calc(100vw - 64px));
  display: grid;
  gap: 22px;
  place-items: center;
  padding: 34px;
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.08);
  color: #fffdf8;
}

.editor-media-audio-fullscreen svg {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.editor-media-audio-fullscreen audio {
  width: 100%;
}

.editor-media-fullscreen-title {
  position: fixed;
  left: 24px;
  right: 76px;
  bottom: 20px;
  color: rgba(255, 253, 248, 0.86);
  font-size: 13px;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.asset-fullscreen-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #fffdf8;
  display: grid;
  place-items: center;
}

.asset-fullscreen-edit {
  position: fixed;
  top: 18px;
  right: 68px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #fffdf8;
  display: grid;
  place-items: center;
}

.asset-fullscreen-close svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.asset-fullscreen-edit svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.asset-fullscreen-close:hover,
.asset-fullscreen-edit:hover,
.asset-fullscreen-close:focus-visible,
.asset-fullscreen-edit:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.image-crop-backdrop {
  z-index: 82;
}

.image-crop-modal {
  width: min(1120px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  overflow: auto;
}

.image-crop-workspace {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 18px;
  border-radius: 10px;
  background: #101316;
  overflow: auto;
}

.image-crop-canvas {
  position: relative;
  width: fit-content;
  max-width: 100%;
  max-height: calc(100vh - 245px);
  line-height: 0;
  user-select: none;
  touch-action: none;
}

.image-crop-canvas img {
  display: block;
  max-width: min(100%, 1024px);
  max-height: calc(100vh - 245px);
  object-fit: contain;
  border-radius: 6px;
}

.image-crop-dim {
  position: absolute;
  background: rgba(0, 0, 0, 0.58);
  pointer-events: none;
}

.image-crop-dim-top {
  inset: 0 0 auto;
}

.image-crop-dim-left {
  left: 0;
}

.image-crop-dim-right {
  right: 0;
}

.image-crop-dim-bottom {
  left: 0;
  right: 0;
  bottom: 0;
}

.image-crop-box {
  position: absolute;
  border: 2px solid #fffdf8;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  background-image:
    linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255, 253, 248, 0.48) calc(33.333% - 0.5px), rgba(255, 253, 248, 0.48) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), rgba(255, 253, 248, 0.48) calc(66.666% - 0.5px), rgba(255, 253, 248, 0.48) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255, 253, 248, 0.48) calc(33.333% - 0.5px), rgba(255, 253, 248, 0.48) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), rgba(255, 253, 248, 0.48) calc(66.666% - 0.5px), rgba(255, 253, 248, 0.48) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
  pointer-events: none;
}

.image-crop-handle {
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 2px solid #fffdf8;
  border-radius: 50%;
  background: #202326;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
  pointer-events: auto;
  touch-action: none;
}

.image-crop-handle.is-top-left {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  cursor: nwse-resize;
}

.image-crop-handle.is-bottom-right {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  cursor: nwse-resize;
}

.video-edit-backdrop {
  z-index: 82;
}

.video-edit-modal {
  width: min(1180px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  overflow: auto;
}

.video-edit-body {
  display: grid;
  gap: 16px;
}

.video-edit-workspace {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 18px;
  border-radius: 10px;
  background: #101316;
  overflow: auto;
}

.video-edit-canvas {
  position: relative;
  width: fit-content;
  max-width: 100%;
  max-height: calc(100vh - 360px);
  line-height: 0;
  user-select: none;
  touch-action: none;
  background: #000;
}

.video-edit-canvas video {
  display: block;
  max-width: min(100%, 1024px);
  max-height: calc(100vh - 360px);
  object-fit: contain;
  border-radius: 6px;
  background: #000;
}

.video-edit-fade-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.video-edit-canvas .image-crop-dim {
  z-index: 2;
}

.video-edit-crop-box {
  z-index: 3;
}

.video-edit-controls {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 0.36fr) minmax(180px, 0.36fr);
  gap: 12px;
  align-items: stretch;
}

.video-edit-timeline,
.video-edit-fade-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffefb;
}

.video-edit-timeline label,
.video-edit-fade-panel label:not(.checkbox-row) {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.video-edit-timeline input[type="range"] {
  width: 100%;
}

.video-edit-timeline output {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.video-edit-fade-panel .checkbox-row {
  margin: 0;
}

.video-edit-fade-panel input[type="color"] {
  width: 100%;
  height: 38px;
  padding: 2px;
}

.video-edit-fade-panel select {
  width: 100%;
}

@media (max-width: 900px) {
  .video-edit-controls {
    grid-template-columns: 1fr;
  }
}

.asset-usage-list {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.room-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr);
  gap: 18px;
  align-items: start;
}

.hidden-object-board-detail-layout {
  grid-template-columns: minmax(0, 1fr);
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.9);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-header {
  min-height: 56px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.panel-title-toggle {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.panel-title-toggle:hover .section-title {
  color: var(--accent-dark);
}

.panel-collapse-icon {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.76);
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.panel-title-toggle:hover .panel-collapse-icon {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.panel-collapse-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.collapsible-panel.is-collapsed .panel-body {
  display: none;
}

.collapsible-panel.is-collapsed .panel-collapse-icon {
  transform: rotate(-90deg);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 760;
}

.panel-body {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label,
.field-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 720;
}

.field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field-heading .inline-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.data-actions {
  justify-content: flex-start;
}

.modal-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.modal-copy strong {
  color: var(--ink);
}

.generated-icon-review {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  text-align: center;
}

.generated-icon-review img {
  width: auto;
  height: auto;
  max-width: min(420px, 100%);
  max-height: min(52vh, 520px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 34px rgba(39, 37, 35, 0.16);
}

.generated-video-review video {
  width: auto;
  height: auto;
  max-width: min(720px, 100%);
  max-height: min(52vh, 520px);
  object-fit: contain;
  display: block;
  border-radius: 8px;
  background: #050505;
  box-shadow: 0 18px 34px rgba(39, 37, 35, 0.16);
}

.generated-music-review {
  display: grid;
  justify-items: stretch;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
}

.generated-music-preview {
  width: 100%;
  min-width: 0;
}

.ai-video-error {
  max-height: 180px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border-radius: 6px;
  background: #3b151f;
  color: #fffdf8;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-reference-upload {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
}

.ai-reference-preview {
  display: flex;
  justify-content: center;
}

.ai-reference-preview img {
  width: auto;
  height: auto;
  max-width: min(220px, 100%);
  max-height: 180px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(39, 37, 35, 0.12);
}

.text-generator-modal {
  width: min(820px, calc(100vw - 32px));
}

.ai-text-result {
  min-height: 320px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.ai-text-prompt {
  min-height: 220px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.prompt-review-details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  padding: 10px 12px;
}

.prompt-review-details summary {
  cursor: pointer;
  font-weight: 760;
}

.prompt-review-details .ai-text-prompt {
  margin-top: 10px;
  min-height: 160px;
}

.scenario-review {
  display: grid;
  gap: 14px;
  max-height: min(62vh, 680px);
  overflow: auto;
  padding-right: 4px;
}

.scenario-review-section,
.scenario-review-card,
.scenario-review-nested-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
}

.scenario-review-section {
  padding: 14px;
}

.scenario-review-card {
  padding: 12px;
  background: #fbf7ef;
}

.scenario-review-nested-card {
  padding: 10px;
}

.scenario-review-card-title {
  font-weight: 800;
  color: var(--ink);
}

.scenario-review-list,
.scenario-review-subsection {
  display: grid;
  gap: 10px;
}

.scenario-review-line {
  display: grid;
  grid-template-columns: minmax(140px, 0.32fr) minmax(0, 1fr);
  gap: 10px;
}

.visual-generation-modal {
  width: min(720px, calc(100vw - 32px));
}

.scenario-background-modal {
  width: min(1280px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.scenario-background-modal > .panel-body {
  min-height: 0;
  overflow: auto;
}

.scenario-background-list {
  display: grid;
  gap: 14px;
}

.scenario-background-row {
  display: grid;
  grid-template-columns: minmax(280px, 512px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
}

.scenario-background-preview {
  width: min(512px, 100%);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #171513;
}

.scenario-background-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scenario-background-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fffdf8;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.scenario-background-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.scenario-background-main .textarea.short {
  min-height: 170px;
}

@media (max-width: 900px) {
  .scenario-background-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.generation-queue-modal {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.generation-queue-modal > .panel-body {
  min-height: 0;
  overflow: auto;
}

.object-finding-queue-review-modal {
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.object-finding-queue-review-modal > .panel-body {
  min-height: 0;
  overflow: auto;
}

.generation-queue-list {
  display: grid;
  gap: 10px;
}

.generation-queue-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
}

.generation-queue-thumb {
  width: 86px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #211f1d;
  color: #fffdf8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.generation-queue-thumb img,
.generation-queue-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.queue-thumb-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}

.queue-thumb-zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.36);
  color: #fffdf8;
  font-size: 34px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 140ms ease;
}

.queue-thumb-button:hover .queue-thumb-zoom,
.queue-thumb-button:focus-visible .queue-thumb-zoom {
  opacity: 1;
}

.queue-sound-thumb {
  display: grid;
  place-items: center;
}

.queue-sound-thumb svg {
  width: 32px;
  height: 32px;
}

.queue-thumb-placeholder {
  padding: 6px;
  text-align: center;
}

.generation-queue-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.generation-queue-main strong,
.generation-queue-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-queue-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.generation-queue-review-stack {
  display: grid;
  gap: 6px;
}

.generation-queue-review-stack .button {
  justify-content: center;
  width: 100%;
}

.visual-generation-summary {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: baseline;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  padding: 10px 12px;
}

.visual-generation-summary strong {
  font-size: 22px;
}

.visual-task-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.visual-progress-head,
.visual-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.visual-progress-bar {
  height: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #efe8dc;
}

.visual-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 180ms ease;
}

.visual-current {
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  padding: 10px 12px;
}

.visual-current span:last-child {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.visual-errors {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  padding: 10px 12px;
}

.visual-errors summary {
  cursor: pointer;
  font-weight: 760;
}

.empty-state.is-warning {
  border-color: rgba(139, 63, 83, 0.32);
  background: #f9ecef;
  color: #763448;
}

.ai-image-modal,
.ai-video-modal {
  width: min(920px, calc(100vw - 32px));
}

.ai-video-modal {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.ai-video-modal > .panel-body {
  min-height: 0;
  overflow: auto;
}

.ai-video-modal .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0), var(--panel) 26%);
}

.modal-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  width: fit-content;
}

.modal-tab {
  border: 0;
  background: transparent;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 6px;
  color: var(--muted);
}

.modal-tab:hover,
.modal-tab.is-active {
  background: var(--panel-2);
  color: var(--ink);
  font-weight: 740;
}

.ai-asset-select-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
  gap: 14px;
  align-items: start;
}

.ai-asset-preview {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fffefb;
}

.ai-asset-preview .asset-preview-media {
  max-height: min(34vh, 240px);
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
}

.input,
.textarea,
.select {
  width: 100%;
  border: 1px solid var(--line);
  background: #fffefb;
  border-radius: 8px;
  color: var(--ink);
  padding: 10px 11px;
  min-height: 40px;
}

.textarea {
  resize: vertical;
  min-height: 104px;
  line-height: 1.45;
}

.textarea.short {
  min-height: 72px;
}

.room-row-main .textarea.short {
  min-height: 122px;
}

.scenario-list,
.scenario-room-list,
.stack {
  display: grid;
  gap: 12px;
}

.scenario-block,
.scenario-room-row,
.item-row,
.person-row,
.room-row,
.dialogue-row,
.hotspot-row {
  border: 1px solid var(--line);
  background: #fffefb;
  border-radius: var(--radius);
}

.hotspot-row {
  scroll-margin-top: 18px;
}

.scenario-block {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.scenario-room-row {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.scenario-room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.scenario-block-head,
.item-row-head,
.row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hotspot-row-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hotspot-row-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotspot-entry-toggle {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.hotspot-entry-toggle svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  transition: transform 0.16s ease;
}

.hotspot-entry-toggle:hover,
.hotspot-entry-toggle:focus-visible {
  outline: 0;
  border-color: rgba(35, 120, 117, 0.35);
  color: var(--teal);
}

.hotspot-row.is-collapsed .hotspot-entry-toggle svg,
.hotspot-collapsible-subpanel.is-collapsed .panel-collapse-icon svg {
  transform: rotate(-90deg);
}

.hotspot-row.is-collapsed .hotspot-row-body {
  display: none;
}

.hotspot-row-body > div {
  margin: 15px 0px;
}

.hotspot-row-body > .form-grid > .field {
  grid-template-rows: 15px auto;
}

.ai-asset-preview .row-title {
  max-inline-size: 280px;
}

.item-row {
  padding: 12px;
  display: grid;
  gap: 12px;
}

.item-row-head {
  align-items: center;
}

.item-row-head > div:not(.inline-actions) {
  flex: 1;
  min-width: 0;
}

.person-row,
.room-row {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.person-row-main,
.room-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.persona-avatar {
  width: 128px;
  height: auto;
  font-size: 13px;
}

.flow-node-modal .persona-avatar {
  width: auto;
  height: auto;
}

.item-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: #e6eee9;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.persona-portrait-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.row-title {
  font-weight: 760;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-note {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.inline-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.compact-select {
  width: auto;
  min-width: 190px;
}

.room-thumb {
  width: 256px;
  height: 184px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.upload-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.reference-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.reference-thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.reference-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reference-thumb .editor-media-preview-button {
  width: 100%;
  height: 100%;
}

.reference-thumb .icon-button {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255, 253, 248, 0.92);
}

.video-upload-card,
.dialogue-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffefb;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.video-upload-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.video-preview,
.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.video-preview {
  display: block;
  object-fit: cover;
}

.voiceover-preview {
  width: 100%;
  display: block;
}

.audio-placeholder {
  height: 100px;
}

.video-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
}

.video-placeholder svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.room-managed-assets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.room-managed-asset-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
}

.room-managed-asset-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.room-managed-asset-head > div {
  min-width: 0;
}

.room-managed-asset-head .row-note {
  overflow-wrap: anywhere;
}

.room-managed-asset-thumb,
.room-managed-asset-placeholder,
.room-managed-asset-audio {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  overflow: hidden;
}

.room-managed-asset-thumb > img,
.room-managed-asset-thumb > video,
.room-managed-asset-thumb.editor-media-preview-button > img,
.room-managed-asset-thumb.editor-media-preview-button > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-managed-asset-placeholder,
.room-managed-asset-audio {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
}

.room-managed-asset-placeholder svg,
.room-managed-asset-audio svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
}

.room-managed-asset-audio audio {
  width: min(92%, 360px);
}

.room-asset-manager-modal {
  max-height: min(860px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.room-asset-manager-modal > .panel-body {
  min-height: 0;
  overflow: auto;
}

.room-asset-manager-modal .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0), var(--panel) 26%);
}

.room-asset-manager-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
  gap: 16px;
  align-items: start;
}

.room-asset-manager-preview .room-managed-asset-placeholder,
.room-asset-manager-preview .room-managed-asset-thumb,
.room-asset-manager-preview .room-managed-asset-audio {
  min-height: 220px;
}

.room-asset-select-layout .asset-list {
  max-height: min(520px, 55vh);
  overflow: auto;
}

.asset-filter-panel + .room-asset-select-layout {
  margin-top: 12px;
}

.room-asset-reference-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.editor-managed-asset-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
}

.editor-managed-asset-card .room-managed-asset-thumb > img,
.editor-managed-asset-card .room-managed-asset-thumb.editor-media-preview-button > img {
  object-fit: contain;
  background: var(--panel-2);
}

.editor-managed-asset-secondary {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.editor-managed-asset-secondary > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.editor-managed-asset-secondary svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}

.editor-managed-animation-thumb {
  aspect-ratio: 16 / 9;
}

.item-managed-asset-card,
.active-place-managed-asset-card {
  width: 100%;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
}

.item-managed-asset-card > .room-managed-asset-head,
.active-place-managed-asset-card > .room-managed-asset-head {
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  align-self: stretch;
}

.item-managed-asset-card > .room-managed-asset-thumb,
.item-managed-asset-card > .room-managed-asset-placeholder,
.active-place-managed-asset-card > .room-managed-asset-thumb,
.active-place-managed-asset-card > .room-managed-asset-placeholder {
  grid-column: 1;
  grid-row: 1;
  width: 150px;
  aspect-ratio: 1;
}

.active-place-managed-asset-card > .room-managed-asset-placeholder,
.item-managed-asset-card > .room-managed-asset-placeholder {
  aspect-ratio: 2 !important;
}

.item-managed-asset-card > .editor-managed-asset-secondary,
.active-place-managed-asset-card > .editor-managed-asset-secondary {
  grid-column: 1 / -1;
}

.game-identity {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.game-icon-control {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.game-identity .game-icon {
  width: 112px;
  height: 199px;
  font-size: 23px;
}

.dialogue-row,
.hotspot-row {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.room-header-controls {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.dialogue-grid {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.dialogue-actions {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.dialogue-order-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.dialogue-actions .icon-button {
  width: 34px;
  height: 34px;
}

.dialogue-speaker {
  display: grid;
  gap: 10px;
  align-items: center;
}

.dialogue-media-row .voiceover-preview {
  grid-column: 1 / -1;
  width: 100%;
}

.dialogue-media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(247, 243, 235, 0.58);
}

.dialogue-media-summary {
  display: grid;
  gap: 2px;
}

.dialogue-media-preview {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.dialogue-media-preview img,
.dialogue-media-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.text-format-label-row,
.after-success-text-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.text-format-label-row > label,
.after-success-text-label-row > label {
  margin: 0;
}

.text-format-toolbar,
.after-success-text-format {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dialogue-line-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.dialogue-line-field .text-format-toolbar {
  justify-content: flex-end;
}

.text-format-toolbar .icon-button.text-icon,
.after-success-text-format .icon-button.text-icon {
  width: 32px;
  height: 32px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

.text-format-toolbar .icon-button.text-icon.is-italic,
.after-success-text-format .icon-button.text-icon.is-italic {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
}

.text-format-toolbar .icon-button.text-icon.is-underline,
.after-success-text-format .icon-button.text-icon.is-underline {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.text-format-toolbar .icon-button.text-icon.is-active,
.after-success-text-format .icon-button.text-icon.is-active {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: #f8eadc;
}

.text-format-toolbar .icon-button.text-icon:hover,
.after-success-text-format .icon-button.text-icon:hover {
  color: var(--ink);
  border-color: rgba(182, 109, 58, 0.45);
}

.text-format-toolbar .text-format-size {
  width: auto;
  min-width: 78px;
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
}

.after-success-assets {
  display: grid;
  gap: 10px;
}

.after-success-tabs {
  margin: 8px 0 12px;
}

.after-success-tab.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.after-success-dialogue-panel {
  display: grid;
  gap: 12px;
}

.after-success-dialogue-row {
  margin: 0;
}

.after-success-audio-preview {
  grid-column: 1 / -1;
  width: 100%;
}

.after-success-assets .editor-media-preview-button.is-fill {
  grid-column: 1 / -1;
  width: min(260px, 100%);
}

.room-stage {
  display: grid;
  gap: 12px;
}

.preview-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 360px;
  background: #201b17;
  border: 1px solid var(--line-strong);
}

.preview-frame img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  max-height: 560px;
  display: block;
  object-fit: cover;
}

.preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 15, 11, 0.05), rgba(20, 15, 11, 0.26));
}

.hotspot-marker {
  position: absolute;
  min-width: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fffdf8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -17px);
  z-index: 2;
  cursor: pointer;
}

.hotspot-marker-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fffdf8;
  background: rgba(182, 109, 58, 0.82);
  box-shadow: 0 0 0 6px rgba(182, 109, 58, 0.18), 0 10px 20px rgba(0, 0, 0, 0.28);
  display: grid;
  place-items: center;
}

.hotspot-marker-label {
  max-width: 150px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.72);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
  overflow-wrap: anywhere;
}

.hotspot-marker.is-active .hotspot-marker-icon {
  background: var(--teal);
  box-shadow: 0 0 0 7px rgba(35, 120, 117, 0.24), 0 10px 20px rgba(0, 0, 0, 0.28);
}

.hotspot-marker svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.hotspot-marker.is-lead-arrow .hotspot-marker-icon {
  background: rgba(201, 162, 75, 0.9);
  box-shadow: 0 0 0 6px rgba(201, 162, 75, 0.2), 0 10px 20px rgba(0, 0, 0, 0.28);
}

.hotspot-marker.is-lead-arrow .hotspot-marker-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  transform: rotate(calc(var(--lead-arrow-angle, 90deg) - 90deg));
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.hotspot-marker.is-lead-arrow .lead-arrow-marker-symbol {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  transform: rotate(calc(var(--lead-arrow-angle, 90deg) - 90deg));
  transform-origin: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.lead-arrow-direction-menu {
  position: absolute;
  z-index: 9;
  width: 214px;
  transform: translate(12px, -10px);
  padding: 10px;
  border: 1px solid rgba(201, 162, 75, 0.45);
  border-radius: 10px;
  background: rgba(17, 16, 15, 0.94);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.36);
  color: #fffdf8;
}

.lead-arrow-direction-title {
  margin: 0 0 8px;
  color: #d8b76d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead-arrow-direction-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.lead-arrow-direction-options button {
  min-height: 30px;
  border: 1px solid rgba(255, 253, 248, 0.16);
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.07);
  color: #fffdf8;
  font-weight: 800;
  cursor: pointer;
}

.lead-arrow-direction-options button:hover,
.lead-arrow-direction-options button:focus-visible,
.lead-arrow-direction-options button.is-active {
  border-color: rgba(201, 162, 75, 0.78);
  background: rgba(201, 162, 75, 0.24);
  outline: none;
}

.gameplay-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.gameplay-stage-panel {
  min-width: 0;
}

.gameplay-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 560px;
  background: #201b17;
  border: 1px solid var(--line-strong);
}

.gameplay-frame img,
.gameplay-frame video {
  width: 100%;
  height: 100%;
  min-height: 560px;
  max-height: 720px;
  display: block;
  object-fit: cover;
}

.gameplay-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, transparent 0 48%, rgba(18, 14, 12, 0.42) 100%),
    linear-gradient(180deg, rgba(20, 15, 11, 0.08), rgba(20, 15, 11, 0.3));
  pointer-events: none;
}

.gameplay-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid #fffdf8;
  background: rgba(182, 109, 58, 0.9);
  box-shadow: 0 0 0 7px rgba(182, 109, 58, 0.18), 0 12px 24px rgba(0, 0, 0, 0.32);
  color: #fffdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  z-index: 2;
  padding: 0 10px;
}

.gameplay-dot.mini-game {
  background: rgba(35, 120, 117, 0.92);
  box-shadow: 0 0 0 7px rgba(35, 120, 117, 0.22), 0 12px 24px rgba(0, 0, 0, 0.32);
}

.gameplay-dot.exit-door {
  background: rgba(88, 123, 70, 0.94);
  box-shadow: 0 0 0 7px rgba(88, 123, 70, 0.22), 0 12px 24px rgba(0, 0, 0, 0.32);
}

.gameplay-dot.lead-arrow {
  min-width: 42px;
  width: 42px;
  padding: 0;
  background: rgba(201, 162, 75, 0.92);
  box-shadow: 0 0 0 7px rgba(201, 162, 75, 0.2), 0 12px 24px rgba(0, 0, 0, 0.32);
}

.gameplay-dot.lead-arrow img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  transform: rotate(calc(var(--lead-arrow-angle, 90deg) - 90deg));
  animation: leadArrowSwing 2s ease-in-out infinite;
  pointer-events: none;
}

.gameplay-dot.lead-arrow span {
  display: none;
}

.gameplay-dot.is-locked {
  background: rgba(125, 119, 109, 0.9);
  box-shadow: 0 0 0 7px rgba(125, 119, 109, 0.16), 0 12px 24px rgba(0, 0, 0, 0.32);
}

.gameplay-dot.is-solved {
  outline: 3px solid rgba(158, 240, 204, 0.56);
}

.gameplay-dot.is-disabled {
  cursor: default;
  opacity: 0.45;
  filter: saturate(0.65);
}

.gameplay-dot svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex: 0 0 auto;
}

.gameplay-dot span {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 780;
}

.gameplay-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.gameplay-dialogue-list {
  display: grid;
  gap: 10px;
}

.gameplay-dialogue-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  padding: 10px;
}

.gameplay-dialogue-line p {
  margin: 3px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.gameplay-inventory {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gameplay-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffefb;
  padding: 5px 10px 5px 5px;
  font-size: 13px;
}

.gameplay-item-chip .item-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 10px;
}

.gameplay-requirements {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.gameplay-requirements strong {
  font-size: 12px;
  color: var(--muted);
}

.tag.is-locked {
  color: #7d2925;
  border-color: rgba(163, 59, 52, 0.35);
  background: #f2dfdb;
}

.gameplay-zoom-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fffefb;
}

.gameplay-zoom-media-wrap {
  position: relative;
  min-height: 210px;
  background: #201b17;
}

.gameplay-zoom-back {
  position: absolute;
  top: 2px;
  left: 10px;
  z-index: 5;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.gameplay-zoom-back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleX(-1);
  display: block;
  filter: none;
}

.gameplay-zoom-back:hover,
.gameplay-zoom-back:focus-visible {
  outline: none;
  filter: brightness(1.08);
}

.gameplay-zoom-media-wrap.is-mini-start {
  cursor: pointer;
}

.gameplay-zoom-panel.is-mini-start .gameplay-zoom-media-wrap.is-mini-start:hover {
  outline: 2px solid rgba(255, 214, 160, 0.55);
  outline-offset: -2px;
}

.gameplay-zoom-image {
  width: 100%;
  height: 100%;
  min-height: 210px;
  background-size: 190%;
  background-repeat: no-repeat;
  background-color: #201b17;
}

.gameplay-zoom-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gameplay-zoom-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  background: transparent;
}

.gameplay-zoom-reward-pins {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0px 0px 8px 2px #000;
}

.gameplay-zoom-reward-pin {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 2px solid #fffdf8;
  border-radius: 999px;
  background: rgba(35, 120, 117, 0.92);
  box-shadow: 0 0 0 7px rgba(35, 120, 117, 0.22), 0 12px 24px rgba(0, 0, 0, 0.36);
  color: #fffdf8;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
}

.gameplay-zoom-reward-pin-icon {
  display: grid;
  place-items: center;
}

.gameplay-zoom-reward-pin svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.gameplay-zoom-reward-pin.is-collected {
  opacity: 0.56;
  cursor: default;
}

.gameplay-zoom-reward-pin.is-collected .gameplay-zoom-reward-pin-icon {
  color: #fffdf8;
}

.gameplay-zoom-reward-pin.is-collected {
  background: rgba(88, 123, 70, 0.92);
  box-shadow: 0 0 0 7px rgba(88, 123, 70, 0.22), 0 12px 24px rgba(0, 0, 0, 0.36);
}

.gameplay-zoom-reward-pin.is-unavailable {
  background: rgba(125, 119, 109, 0.9);
  box-shadow: 0 0 0 7px rgba(125, 119, 109, 0.16), 0 12px 24px rgba(0, 0, 0, 0.36);
}

.gameplay-zoom-closeup-pin {
  background: rgba(176, 122, 42, 0.94);
  box-shadow: 0 0 0 7px rgba(176, 122, 42, 0.22), 0 12px 24px rgba(0, 0, 0, 0.36);
  cursor: zoom-in;
}

.gameplay-zoom-closeup-pins {
  z-index: 3;
}

.gameplay-zoom-panel.is-locked-fallback {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: min(620px, 100%);
  overflow: hidden;
  color: #fffdf8;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.56);
}

.gameplay-zoom-panel.is-locked-fallback .gameplay-zoom-image {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background-repeat: no-repeat;
  background-color: #050505;
}

.gameplay-zoom-panel.is-locked-fallback .gameplay-zoom-body {
  padding: clamp(18px, 3vw, 30px);
  justify-items: center;
}

.gameplay-zoom-panel.is-locked-fallback .gameplay-zoom-body p {
  max-width: 520px;
  color: rgba(255, 253, 248, 0.78);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.55;
}

.gameplay-zoom-panel.is-locked-fallback .icon-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  color: #fff;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.gameplay-zoom-panel.is-locked-fallback .icon-button:hover,
.gameplay-zoom-panel.is-locked-fallback .icon-button:focus-visible {
  color: #fff;
  background: transparent;
  outline: 2px solid rgba(255, 255, 255, 0.48);
  outline-offset: 2px;
}

.gameplay-zoom-body {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.gameplay-zoom-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.gameplay-mini-modal {
  width: min(860px, 96vw);
}

.gameplay-mini-modal .mini-preview-surface {
  min-height: 0;
}

.gameplay-popup-frame {
  position: relative;
  display: grid;
  width: min(620px, 100%);
  max-height: calc(100% - 44px);
  min-width: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  padding: 2px;
  background: linear-gradient(135deg, #feffcf, #858671);
  border-radius: 8px;
}

.gameplay-popup-frame > :not(.gameplay-popup-close):not(.gameplay-popup-back) {
  min-width: 0;
}

.gameplay-popup-frame > * {
  pointer-events: auto;
}

.gameplay-popup-frame.is-mini {
  width: min(900px, 100%);
  height: min(560px, calc(100% - 44px));
}

.gameplay-popup-frame.is-mini > .gameplay-mini-modal.is-in-frame,
.gameplay-popup-frame.is-tip > .gameplay-tip-panel,
.gameplay-popup-frame.is-settings > .full-settings-panel,
.gameplay-popup-frame.is-after-success-video > .full-after-success-video-panel,
.gameplay-popup-frame.is-after-success-dialogue > .full-after-success-dialogue-panel,
.gameplay-popup-frame.is-item > .full-inventory-item-panel {
  width: 100%;
  max-height: 100%;
  z-index: 29;
  background: #9a9068;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.gameplay-popup-frame.is-zoom > .gameplay-zoom-panel.is-in-frame {
  max-height: 100%;
}

.gameplay-popup-frame.is-zoom.has-detail-media {
  /*width: auto;*/
  max-width: calc(100% - 40px);
  justify-items: center;
}

.gameplay-popup-frame.is-item {
  width: min(512px, calc(100% - 40px));
  justify-items: center;
  padding: 3px;
  overflow: visible;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.gameplay-popup-frame.is-item > .gameplay-popup-close {
  top: 8px;
  right: 8px;
}

.gameplay-popup-frame.is-settings {
  width: min(430px, 100%);
}

.gameplay-popup-frame.is-after-success-video {
  width: min(720px, 100%);
}

.gameplay-popup-frame.is-after-success-dialogue {
  width: min(720px, 100%);
}

.gameplay-popup-frame.is-tip {
  width: min(520px, 100%);
}

.gameplay-popup-frame.is-opening-from-hotspot {
  animation: gameplayPopupOpenFromHotspot 0.63s cubic-bezier(0.16, 0.86, 0.28, 1) both;
}

.gameplay-popup-frame.is-new-reward-popup {
  animation: fullInventoryRewardArrive 1.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gameplay-popup-frame.is-new-reward-popup > .full-inventory-item-panel.is-new-reward {
  animation: none;
}

@keyframes gameplayPopupOpenFromHotspot {
  0% {
    opacity: 0;
    transform: translate(var(--popup-origin-x, 0), var(--popup-origin-y, 0)) scale(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

.gameplay-popup-close {
  position: absolute;
  top: -19px;
  left: auto;
  right: -19px;
  z-index: 30;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: linear-gradient(347deg, #feffcf, #858671);
  border-radius: 19px;
  border: 2px solid #feffcf;
  box-shadow: inset 0px 0px 8px 2px #000;
}

.gameplay-popup-close img {
  width: 40%;
  height: 40%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.62));
}

.gameplay-popup-close:hover,
.gameplay-popup-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.54);
  outline-offset: 3px;
}

.gameplay-popup-back {
  top: 22px;
}

.gameplay-popup-back svg {
  width: 42%;
  height: 42%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  color: #fffdf8;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.68));
}

.gameplay-tip-backdrop {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 42px);
  background: rgba(0, 0, 0, 0.5);
}

.gameplay-tip-backdrop.is-in-frame.is-mini-pass {
  z-index: 120;
  background: rgba(0, 0, 0, 0.68);
}

.gameplay-tip-panel {
  position: relative;
  width: min(520px, 100%);
  color: #fffdf8;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.56);
  padding: clamp(22px, 3.6vw, 36px);
}

.gameplay-tip-eyebrow {
  color: rgba(255, 253, 248, 0.64);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0;
  text-transform: uppercase;
}

.gameplay-tip-panel h3 {
  margin: 8px 44px 12px;
  color: #fffdf8;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.15;
}

.gameplay-tip-panel p {
  margin: 0 auto;
  max-width: 420px;
  color: rgba(255, 253, 248, 0.82);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.55;
}

.gameplay-tip-detail {
  margin: 16px auto 0;
  max-width: 420px;
  color: rgba(255, 253, 248, 0.58);
  font-size: 13px;
  line-height: 1.45;
}

.gameplay-tip-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  color: #fff;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.gameplay-tip-close:hover,
.gameplay-tip-close:focus-visible {
  color: #fff;
  background: transparent;
  outline: 2px solid rgba(255, 255, 255, 0.48);
  outline-offset: 2px;
}

.full-gameplay-overlay-layer {
  position: absolute;
  inset: -1px;
  z-index: 7;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* Popups must sit above the bottom HUD (inventory/menu z-index 20), otherwise the bar
   paints through the lower part of the item frame and looks like a transparent fade. */
.full-gameplay-overlay-layer:has(> *) {
  z-index: 40;
}

.full-gameplay-overlay-layer:has(.full-inventory-item-backdrop) {
  z-index: 50;
}

.full-room-ui-layer:has(.gameplay-popup-frame.is-zoom) > .full-bottom-ui {
  z-index: 45;
  pointer-events: none;
}

.full-room-ui-layer:has(.gameplay-popup-frame.is-zoom) > .full-bottom-ui > .full-inventory-control {
  visibility: visible;
  pointer-events: auto;
}

.full-room-ui-layer:has(.gameplay-popup-frame.is-zoom) > .full-bottom-ui > .full-settings-toggle,
.full-room-ui-layer:has(.gameplay-popup-frame.is-zoom) > .full-bottom-ui > .full-hint-control,
.full-room-ui-layer:has(.gameplay-popup-frame.is-zoom) > .full-bottom-ui > .full-settings-backdrop {
  visibility: hidden;
  pointer-events: none;
}

.full-gameplay-overlay-layer > * {
  pointer-events: auto;
}

.full-gameplay-overlay-layer:has(> .full-after-success-text) {
  z-index: 90;
}

.full-gameplay-overlay-layer:has(.gameplay-popup-frame.is-tip) {
  z-index: 50;
}

.full-gameplay-overlay-layer:has(.gameplay-tip-backdrop.is-mini-pass) {
  z-index: 120;
}

.full-gameplay-overlay-layer:has(> .full-after-success-text) > :not(.full-after-success-text) {
  pointer-events: none;
}

.full-gameplay-overlay-layer > .full-after-success-text {
  z-index: 100;
}

.full-zoom-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 42px);
  background: rgba(0, 0, 0, 0.5);
}

body:not(.standalone-preview-body) .full-gameplay-overlay-layer:has(.full-inventory-item-backdrop) .full-zoom-backdrop .gameplay-popup-frame,
body:not(.standalone-preview-body) .full-gameplay-overlay-layer:has(.full-inventory-item-backdrop) .full-zoom-backdrop .gameplay-zoom-panel.is-in-frame,
body:not(.standalone-preview-body) .full-gameplay-overlay-layer:has(.full-inventory-item-backdrop) .full-zoom-backdrop .gameplay-zoom-media-wrap,
body:not(.standalone-preview-body) .full-gameplay-overlay-layer:has(.full-inventory-item-backdrop) .full-zoom-backdrop .gameplay-zoom-image {
  box-shadow: none;
}

body:not(.standalone-preview-body) .full-gameplay-overlay-layer:has(.full-inventory-item-backdrop) .full-zoom-backdrop .gameplay-popup-frame {
  padding: 0;
  background: transparent;
}

.gameplay-zoom-panel.is-in-frame {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: min(713px, 100%);
  max-height: 100%;
  overflow: auto;
  color: #fffdf8;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.56);
}

.gameplay-zoom-panel.is-in-frame.has-detail-media {
  width: auto;
  max-width: min(828px, 100%);
}

.gameplay-zoom-panel.is-in-frame .gameplay-zoom-image {
  min-height: min(414px, 48vh);
  background-size: cover;
  background-position: center;
}

.gameplay-zoom-panel.is-in-frame .gameplay-zoom-media-wrap {
  min-height: min(414px, 48vh);
  box-shadow: inset 0px 0px 8px 2px #000;
}

.gameplay-zoom-panel.is-in-frame.has-detail-media .gameplay-zoom-media-wrap {
  display: grid;
  place-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  background: #050505;
  box-shadow: inset 0px 0px 8px 2px #000;
}

.gameplay-zoom-panel.is-in-frame.has-detail-media .gameplay-zoom-img,
.gameplay-zoom-panel.is-in-frame.has-detail-media .gameplay-zoom-video {
  width: auto;
  height: auto;
  max-width: min(828px, calc(100vw - 80px), 100%);
  max-height: min(67vh, 644px);
  min-height: 0;
  object-fit: contain;
}

.gameplay-zoom-panel.is-in-frame.is-locked-fallback {
  width: min(713px, 100%);
  max-height: calc(100% - 24px);
  overflow: hidden;
}

.gameplay-zoom-panel.is-in-frame.is-locked-fallback .gameplay-zoom-media-wrap {
  min-height: 0;
}

.gameplay-zoom-panel.is-in-frame.is-locked-fallback .gameplay-zoom-image {
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  background-size: 250%;
}

.gameplay-zoom-panel.is-in-frame .gameplay-zoom-body {
  /*padding: clamp(18px, 3vw, 30px);*/
  display: grid;
  gap: 12px;
  justify-items: center;
}

.gameplay-zoom-panel.is-in-frame .row-head {
  display: block;
  width: 100%;
}

.gameplay-zoom-panel.is-in-frame .row-title {
  color: #fffdf8;
  /*font-size: clamp(22px, 3vw, 34px);*/
  line-height: 1.15;
  white-space: normal;
  max-inline-size: none;
}

.gameplay-zoom-panel.is-in-frame .row-note {
  display: none;
}

.gameplay-zoom-panel.is-in-frame .gameplay-zoom-body p {
  max-width: 520px;
  color: rgba(255, 253, 248, 0.78);
  /*font-size: clamp(15px, 1.7vw, 18px);*/
  line-height: 1.55;
}

.gameplay-zoom-panel.is-in-frame .icon-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  color: #fff;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.gameplay-zoom-panel.is-in-frame .icon-button:hover,
.gameplay-zoom-panel.is-in-frame .icon-button:focus-visible {
  color: #fff;
  background: transparent;
  outline: 2px solid rgba(255, 255, 255, 0.48);
  outline-offset: 2px;
}

.gameplay-modal-backdrop.is-in-frame {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  padding: clamp(14px, 3vw, 28px);
  background: rgba(0, 0, 0, 0.5);
}

.gameplay-mini-modal.is-in-frame {
  position: relative;
  width: min(900px, 100%);
  height: min(560px, 100%);
  max-height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  color: #fffdf8;
  background: rgba(0, 0, 0, 0.8);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.56);
  overflow: hidden;
}

.gameplay-mini-modal.is-in-frame .panel-body {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: clamp(14px, 2.6vw, 24px);
  box-sizing: border-box;
}

.gameplay-mini-modal.is-in-frame .gameplay-mini-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  color: #fff;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.gameplay-mini-modal.is-in-frame .gameplay-mini-close:hover,
.gameplay-mini-modal.is-in-frame .gameplay-mini-close:focus-visible {
  color: #fff;
  background: transparent;
  outline: 2px solid rgba(255, 255, 255, 0.48);
  outline-offset: 2px;
}

.gameplay-mini-modal.is-in-frame .mini-preview-surface {
  width: 100%;
  height: 90%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

.gameplay-mini-modal.is-in-frame .preview-status {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 13px;
}

.full-after-success-video-backdrop {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 42px);
  background: rgba(0, 0, 0, 0.5);
}

.full-after-success-video-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: 100%;
  color: #fffdf8;
  background: rgba(0, 0, 0, 0.8);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.56);
  overflow: hidden;
}

.full-after-success-video {
  display: block;
  width: 100%;
  max-height: min(68vh, 100%);
  background: #050505;
  object-fit: contain;
}

.full-after-success-dialogue-panel {
  position: relative;
  min-height: min(420px, 70vh);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.76);
}

.full-after-success-dialogue-panel .full-stage-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 24px;
}

.full-after-success-dialogue-panel .full-tap-label {
  top: 16px;
  bottom: auto;
  z-index: 3;
}

.full-after-success-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  color: #fff;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.full-after-success-close:hover,
.full-after-success-close:focus-visible {
  color: #fff;
  background: transparent;
  outline: 2px solid rgba(255, 255, 255, 0.48);
  outline-offset: 2px;
}

.full-after-success-text {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px);
  color: #fffdf8;
  text-align: center;
  pointer-events: none;
  animation: fullAfterSuccessTextFade var(--full-center-text-duration, 3s) ease both;
}

.full-after-success-text.is-persistent {
  animation: fullAfterSuccessTextPersistent 180ms ease both;
}

.full-after-success-text span {
  max-width: min(760px, 86%);
  font-family: "Fondamento", "Manrope", system-ui, sans-serif;
  font-size: calc(clamp(18px, 2.6vw, 32px) * var(--text-format-scale, 1));
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.88), 0 0 42px rgba(0, 0, 0, 0.64);
}

.full-after-success-text span.is-bold {
  font-weight: 800;
}

.full-after-success-text span.is-italic {
  font-style: italic;
}

.full-after-success-text span.is-underline {
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

@keyframes fullAfterSuccessTextFade {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  12%,
  58% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.02);
  }
}

@keyframes fullAfterSuccessTextPersistent {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.gameplay-mini-modal.is-in-frame .safe-preview {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.82fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
}

.gameplay-mini-modal.is-in-frame .safe-door {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  align-self: center;
  justify-self: center;
  background-size: contain;
}

.gameplay-mini-modal.is-in-frame .safe-keypad-image {
  width: min(100%, 300px);
  align-self: center;
}

.gameplay-mini-modal.is-in-frame .safe-preview > .preview-status {
  grid-column: 1 / -1;
}

.gameplay-mini-modal.is-in-frame .pattern-preview {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: 10px;
  width: min(100%, 520px);
  margin-inline: auto;
  padding: 12px;
}

.gameplay-mini-modal.is-in-frame .pattern-preview .pattern-frame {
  width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.gameplay-mini-modal.is-in-frame .pattern-preview .pattern-grid {
  align-self: center;
  justify-self: center;
  width: 75%;
  max-width: 75%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
}

.gameplay-mini-modal.is-in-frame .jigsaw-preview {
  position: relative;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.gameplay-mini-modal.is-in-frame .jigsaw-board {
  container-type: size;
  min-height: 0;
  height: 100%;
  padding: 0;
  --fit-piece: min(
    calc(100cqw / var(--jigsaw-cols)),
    calc(100cqh / var(--jigsaw-rows))
  );
  --piece-size: var(--fit-piece);
  --jigsaw-grid-width: calc(var(--fit-piece) * var(--jigsaw-cols));
  --jigsaw-grid-height: calc(var(--fit-piece) * var(--jigsaw-rows));
  --jigsaw-bg-width: calc(var(--jigsaw-grid-width) * var(--jigsaw-zoom, 1.2));
  --jigsaw-bg-height: calc(var(--jigsaw-grid-height) * var(--jigsaw-zoom, 1.2));
}

.gameplay-mini-modal.is-in-frame .jigsaw-slots {
  grid-template-columns: repeat(var(--jigsaw-cols), var(--fit-piece));
  grid-template-rows: repeat(var(--jigsaw-rows), var(--fit-piece));
}

.gameplay-mini-modal.is-in-frame .jigsaw-slot,
.gameplay-mini-modal.is-in-frame .jigsaw-piece {
  width: var(--fit-piece);
  height: var(--fit-piece);
  min-width: 0;
  min-height: 0;
}

.gameplay-mini-modal.is-in-frame .jigsaw-actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  padding: 0;
}

.gameplay-mini-modal.is-in-frame .button-selection-preview,
.gameplay-mini-modal.is-in-frame .clue-solving-preview-shell,
.gameplay-mini-modal.is-in-frame .clue-solving-preview {
  min-height: 0;
  height: 100%;
}

.gameplay-mini-modal.is-in-frame .button-selection-board,
.gameplay-mini-modal.is-in-frame .clue-solving-board {
  min-height: 0;
  height: 100%;
}

.gameplay-mini-modal.is-in-frame .button-selection-image-stage {
  max-height: 100%;
}

.gameplay-mini-modal.is-in-frame .simon-says-preview {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.gameplay-mini-modal.is-in-frame .simon-says-board {
  min-height: 0;
  height: 100%;
}

.gameplay-mini-modal .button-selection-choice:not(.is-selected):not(.is-correct):not(.is-wrong) {
  opacity: 0;
  border-color: transparent;
  box-shadow: none;
}

.gameplay-mini-modal .button-selection-choice:not(.is-selected):not(.is-correct):not(.is-wrong):hover,
.gameplay-mini-modal .button-selection-choice:not(.is-selected):not(.is-correct):not(.is-wrong):focus-visible {
  opacity: 1;
  border-color: rgba(255, 253, 248, 0.72);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.36), 0 0 18px rgba(0, 0, 0, 0.28);
}

.full-gameplay-shell {
  display: grid;
  gap: 14px;
}

.full-gameplay-toolbar {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.full-gameplay-stage,
.full-gameplay-room-stage {
  position: relative;
  min-height: min(760px, calc(100vh - 210px));
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 253, 248, 0.12);
  background: #050505;
  color: #fffdf8;
  box-shadow: var(--shadow);
}

.full-gameplay-stage {
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 68px);
  cursor: pointer;
}

.full-gameplay-stage.is-success {
  background:
    radial-gradient(circle at 50% 36%, rgba(88, 123, 70, 0.48), transparent 38%),
    #050505;
}

.full-gameplay-stage.is-video {
  padding: 0;
  background: #050505;
  cursor: default;
}

.full-gameplay-stage.is-video-ended {
  cursor: pointer;
}

.full-gameplay-stage.has-dialogue-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.28) 56%, rgba(0, 0, 0, 0.58)),
    rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.full-dialogue-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.full-stage-content {
  width: min(860px, 100%);
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  z-index: 1;
  font-family: "Manrope", system-ui, sans-serif;
}

.full-stage-eyebrow {
  color: rgba(255, 253, 248, 0.66);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.full-stage-content h2 {
  margin: 0;
  font-size: clamp(36px, 5vw, 74px);
  line-height: 1.02;
  letter-spacing: 0;
}

.full-stage-content p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 253, 248, 0.78);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: calc(clamp(17px, 2vw, 23px) * var(--text-format-scale, 1));
  font-weight: 500;
  line-height: 1.55;
}

.full-stage-content p.is-bold,
.full-dialogue-card p.is-bold {
  font-weight: 800;
}

.full-stage-content p.is-italic,
.full-dialogue-card p.is-italic {
  font-style: italic;
}

.full-stage-content p.is-underline,
.full-dialogue-card p.is-underline {
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.full-gameplay-stage.has-outro-next-game {
  padding: clamp(22px, 4vw, 54px);
}

.full-stage-outro-grid {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  height: 100%;
  min-height: min(560px, calc(100vh - 280px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 4vw, 58px);
}

.full-stage-outro-grid .full-stage-content {
  width: 100%;
  justify-items: start;
  text-align: left;
}

.full-stage-outro-grid .full-stage-content h2 {
  font-size: clamp(30px, 4vw, 56px);
}

.full-stage-outro-grid .full-stage-content p {
  max-width: 100%;
  font-size: calc(clamp(15px, 1.65vw, 20px) * var(--text-format-scale, 1));
}

.full-outro-next-game {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  align-items: stretch;
  gap: clamp(12px, 2vh, 20px);
  pointer-events: auto;
}

.full-outro-next-game-label {
  align-self: end;
  justify-self: center;
}

.full-outro-next-game-icon-wrap {
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
}

.full-outro-next-game-icon {
  height: 100%;
  max-height: min(58vh, 560px);
  width: auto;
  max-width: min(100%, 34vw);
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(201, 162, 75, 0.4);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.44);
  background: rgba(255, 255, 255, 0.06);
}

.full-outro-next-game-icon.is-empty {
  width: min(100%, 320px);
  display: grid;
  place-items: center;
  padding: 24px;
  color: rgba(255, 253, 248, 0.78);
  text-align: center;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
}

.full-outro-next-game-button {
  width: min(100%, 320px);
  border: 0;
  border-radius: 10px;
  min-height: 48px;
  padding: 0 22px;
  background: var(--ck-primary-button-bg, #f4f4f4);
  color: var(--ck-primary-button-text, #050505);
  font: 800 15px "Manrope", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.full-outro-next-game-button:hover {
  filter: brightness(1.04);
}

.full-gameplay-tap.is-outro-inline {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  justify-self: center;
  margin-top: 2px;
  color: rgba(255, 253, 248, 0.74);
}

.full-gameplay-tap {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(255, 253, 248, 0.7);
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}

.full-room-preload {
  position: absolute;
  left: clamp(22px, 7vw, 92px);
  right: clamp(22px, 7vw, 92px);
  bottom: 54px;
  z-index: 3;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.full-room-preload-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 253, 248, 0.76);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.full-room-preload-label strong {
  color: #fffdf8;
  font-size: 12px;
}

.full-room-preload-track {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 248, 0.22);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.12);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.36);
}

.full-room-preload-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9f1f2e, #e3b35a);
  transition: width 180ms ease;
}

.full-video-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050505;
}

.full-video-preview {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.full-video-sound-toggle {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 253, 248, 0.3);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  color: #fffdf8;
  cursor: pointer;
}

.full-video-sound-toggle svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.full-settings-toggle {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 9;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 253, 248, 0.34);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.72);
  color: #fffdf8;
  cursor: pointer;
}

.full-settings-toggle .settings-asset-icon {
  width: 20px;
  height: 20px;
  filter: invert(1) brightness(1.35);
  pointer-events: none;
}

.full-settings-toggle:hover,
.full-settings-toggle:focus-visible {
  background: rgba(255, 253, 248, 0.14);
  outline: 2px solid rgba(255, 253, 248, 0.42);
  outline-offset: 2px;
}

.full-settings-backdrop {
  position: absolute;
  inset: 0;
  z-index: 101;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 44px);
  background: rgba(0, 0, 0, 0.48);
  cursor: default;
}

.full-settings-panel {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100% - 24px);
  overflow: auto;
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius);
  background: rgba(5, 5, 5, 0.86);
  color: #fffdf8;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.58);
}

.full-settings-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.full-settings-close svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.full-settings-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 34px;
  font-size: 18px;
  font-weight: 900;
}

.full-settings-title .settings-asset-icon {
  width: 20px;
  height: 20px;
  filter: invert(1) brightness(1.35);
  flex: 0 0 auto;
}

.full-volume-row {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.08);
}

.full-volume-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.full-volume-label {
  display: block;
  font-size: 13px;
  font-weight: 900;
}

.full-volume-value {
  display: block;
  margin-top: 3px;
  color: rgba(255, 253, 248, 0.66);
  font-size: 12px;
  font-weight: 800;
}

.full-volume-mute {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  color: #fffdf8;
  cursor: pointer;
}

.full-volume-mute.is-muted {
  color: rgba(255, 253, 248, 0.58);
}

.full-volume-mute svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.full-volume-slider {
  width: 100%;
  accent-color: var(--accent);
}

.full-dialogue-content {
  position: absolute;
  left: clamp(18px, 4vw, 48px);
  right: clamp(18px, 4vw, 48px);
  bottom: 72px;
  width: auto;
  justify-items: start;
  text-align: left;
}

.full-dialogue-card {
  display: grid;
  grid-template-columns: 144px minmax(0, 680px);
  gap: clamp(18px, 3vw, 32px);
  align-items: end;
  width: min(880px, 100%);
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.full-dialogue-persona {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.full-dialogue-card .persona-avatar {
  width: 144px;
  height: 288px;
  font-size: 20px;
  border-radius: var(--radius);
}

.full-dialogue-persona strong {
  display: block;
  max-width: 144px;
  text-align: center;
  font-size: 14px;
  line-height: 1.25;
}

.full-dialogue-card p {
  max-width: none;
  margin: 0;
  font-family: "Fondamento", "Manrope", system-ui, sans-serif;
  font-size: calc(clamp(20px, 2.4vw, 30px) * var(--text-format-scale, 1));
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}

.full-gameplay-room-stage {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #050505;
}

.full-gameplay-room-stage.has-persistent-room-background {
  display: block;
  padding: 0;
}

.full-gameplay-room-stage.has-persistent-room-background .full-room-frame {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: 0;
}

.full-gameplay-room-stage.has-persistent-room-background .full-room-panorama {
  height: 100%;
  min-height: inherit;
}

.full-room-background-layer,
.full-room-click-layer {
  position: absolute;
  inset: 0;
}

.full-room-background-layer {
  z-index: 0;
  overflow: hidden;
}

.full-room-background-layer img,
.full-room-background-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
}

.full-room-background-layer .gameplay-vignette {
  z-index: 1;
}

.full-room-background-music,
.full-dialogue-music {
  display: none;
}

.full-room-click-layer {
  z-index: 2;
  pointer-events: none;
}

.full-room-click-layer .full-gameplay-hotspot {
  pointer-events: auto;
}

.full-room-ui-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.full-room-ui-layer > * {
  pointer-events: auto;
}

.full-room-ui-layer > .full-after-success-text {
  z-index: 90;
  pointer-events: none;
}

.full-room-ui-layer:has(> .full-after-success-text) {
  z-index: 90;
  pointer-events: none;
}

.full-room-ui-layer:has(> .full-after-success-text) > :not(.full-after-success-text) {
  pointer-events: none;
}

.full-room-ui-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 68px);
  color: #fffdf8;
  cursor: pointer;
}

.full-room-ui-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.78) 74%),
    rgba(0, 0, 0, 0.36);
  pointer-events: none;
}

.full-room-ui-overlay.is-dialogue {
  place-items: stretch;
  padding: 0;
}

.full-room-ui-overlay.is-dialogue::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.28) 56%, rgba(0, 0, 0, 0.58)),
    rgba(0, 0, 0, 0.18);
}

.full-room-ui-overlay.is-success::before {
  background:
    radial-gradient(circle at 50% 36%, rgba(88, 123, 70, 0.44), transparent 38%),
    rgba(0, 0, 0, 0.78);
}

.full-room-ui-overlay .full-dialogue-background {
  z-index: 0;
}

.full-room-ui-overlay .full-stage-content,
.full-room-ui-overlay .full-gameplay-tap {
  z-index: 2;
}

.full-room-ui-overlay .full-dialogue-content {
  z-index: 2;
}

.full-room-frame {
  position: relative;
  min-height: min(680px, calc(100vh - 300px));
  overflow: hidden;
  border-radius: var(--radius);
  background: #18130f;
}

.full-room-panorama {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.full-room-panorama img,
.full-room-panorama video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.full-room-miss-feedback {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 45px;
  height: 45px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.full-room-miss-feedback span {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.3333);
  animation: full-room-miss-circle 0.4s ease-out forwards;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.22);
}

.full-room-miss-feedback span:nth-child(2) {
  animation-delay: 0.13s;
}

@keyframes full-room-miss-circle {
  0% {
    opacity: 0;
    transform: scale(0.3333);
  }
  25% {
    opacity: 0.95;
  }
  75% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.full-gameplay-shell.is-vertical {
  justify-items: center;
}

.full-gameplay-shell.is-vertical .full-gameplay-toolbar {
  width: 100%;
}

.full-gameplay-shell.is-vertical .full-gameplay-stage,
.full-gameplay-shell.is-vertical .full-gameplay-room-stage {
  --vertical-preview-height: min(760px, calc(100vh - 210px));
  width: min(calc(var(--vertical-preview-height) * 0.5625), 100%);
  height: var(--vertical-preview-height);
  min-height: 0;
  aspect-ratio: 9 / 16;
}

.full-gameplay-shell.is-vertical .full-gameplay-stage {
  padding: clamp(24px, 5vw, 44px);
}

.full-gameplay-shell.is-vertical .full-gameplay-stage.is-video {
  padding: 0;
}

.full-gameplay-shell.is-vertical .full-stage-content h2 {
  font-size: clamp(32px, 7vw, 54px);
}

.full-gameplay-shell.is-vertical .full-stage-content p {
  font-size: calc(clamp(16px, 3vw, 20px) * var(--text-format-scale, 1));
}

.full-gameplay-shell.is-vertical .full-room-preload {
  left: 18px;
  right: 18px;
  bottom: 58px;
}

.full-gameplay-shell.is-vertical .full-room-preload-label {
  font-size: 10px;
}

.full-gameplay-shell.is-vertical .full-dialogue-content {
  left: 18px;
  right: 18px;
  bottom: 64px;
}

.full-gameplay-shell.is-vertical .full-dialogue-card {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
}

.full-gameplay-shell.is-vertical .full-dialogue-card .persona-avatar {
  width: 112px;
  height: 224px;
}

.full-gameplay-shell.is-vertical .full-dialogue-persona strong {
  max-width: 112px;
}

.full-gameplay-shell.is-vertical .full-dialogue-card p {
  font-size: calc(clamp(17px, 4vw, 22px) * var(--text-format-scale, 1));
}

.full-gameplay-shell.is-vertical .full-gameplay-room-stage {
  display: block;
  padding: 0;
}

.full-gameplay-shell.is-vertical .full-room-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 0;
  cursor: grab;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: none;
  user-select: none;
}

.full-gameplay-shell.is-vertical .full-room-frame::-webkit-scrollbar {
  display: none;
}

.full-gameplay-shell.is-vertical .full-room-frame.is-panning {
  cursor: grabbing;
}

.full-gameplay-shell.is-flutter-player.is-horizontal .full-gameplay-room-stage.has-persistent-room-background .full-room-frame {
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
}

.full-gameplay-shell.is-flutter-player.is-horizontal .full-gameplay-room-stage.has-persistent-room-background .full-room-frame.is-panning {
  cursor: grabbing;
}

.full-gameplay-shell.is-flutter-player.is-horizontal .full-gameplay-room-stage.has-persistent-room-background .full-room-panorama {
  transform-origin: 0 0;
  transform: translate3d(var(--full-room-pan-x, 0px), var(--full-room-pan-y, 0px), 0) scale(var(--full-room-zoom, 1));
  will-change: transform;
}

.full-gameplay-shell.is-flutter-player.is-horizontal .full-gameplay-room-stage.has-persistent-room-background .full-room-panorama img,
.full-gameplay-shell.is-flutter-player.is-horizontal .full-gameplay-room-stage.has-persistent-room-background .full-room-panorama video {
  -webkit-user-drag: none;
  user-select: none;
}

.full-gameplay-shell.is-vertical .full-room-panorama {
  width: max-content;
  height: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.full-gameplay-shell.is-vertical .full-room-panorama img,
.full-gameplay-shell.is-vertical .full-room-panorama video {
  width: auto;
  height: 100%;
  min-height: 0;
  max-width: none;
  -webkit-user-drag: none;
  user-select: none;
}

.full-gameplay-shell.is-vertical .full-room-background-layer img,
.full-gameplay-shell.is-vertical .full-room-background-layer video {
  width: 100%;
  height: 100%;
}

.full-gameplay-shell.is-vertical .full-inventory-control {
  top: 12px;
  right: 12px;
}

.full-gameplay-shell.is-vertical .full-hint-control {
  top: 12px;
  left: 12px;
}

.full-gameplay-shell.is-vertical .full-settings-toggle {
  left: 12px;
  bottom: 12px;
}

.full-gameplay-shell.is-vertical .full-settings-panel {
  width: min(360px, 100%);
  padding: 20px;
}

.full-gameplay-shell.is-vertical .full-inventory-item-panel {
  width: 75%;
}

.full-gameplay-shell.is-vertical .full-inventory-item-close {
  top: -40px;
  right: -6px;
}

.full-gameplay-shell.is-vertical .full-gameplay-overlay-layer {
  inset: -1px;
}

.full-gameplay-shell.is-vertical .gameplay-popup-frame {
  max-height: calc(100% - 40px);
}

.full-gameplay-shell.is-vertical .gameplay-popup-frame.is-zoom {
  width: calc(100% - 24px);
}

.full-gameplay-shell.is-vertical .gameplay-popup-frame.is-zoom.has-detail-media {
  width: auto;
  max-width: calc(100% - 24px);
}

.full-gameplay-shell.is-vertical .gameplay-popup-frame.is-mini {
  width: 100%;
  height: 70%;
  top: -5%;
}

.full-gameplay-shell.is-vertical .gameplay-popup-frame.is-item {
  width: 75%;
}

.full-gameplay-shell.is-vertical .gameplay-popup-close {
  top: 8px;
  left: 8px;
  right: auto;
  width: 34px;
  height: 34px;
}

.full-gameplay-shell.is-vertical .gameplay-zoom-panel.is-in-frame {
  grid-template-columns: 1fr;
  width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  overflow: auto;
}

.full-gameplay-shell.is-vertical .gameplay-popup-frame.is-zoom > .gameplay-zoom-panel.is-in-frame {
  width: 100%;
  max-height: 100%;
}

.full-gameplay-shell.is-vertical .gameplay-popup-frame.is-zoom.has-detail-media > .gameplay-zoom-panel.is-in-frame {
  width: auto;
  max-width: 100%;
}

.full-gameplay-shell.is-vertical .gameplay-zoom-panel.is-in-frame .gameplay-zoom-image {
  min-height: 219px;
}

.full-gameplay-shell.is-vertical .gameplay-zoom-panel.is-in-frame .gameplay-zoom-media-wrap {
  min-height: 219px;
}

.full-gameplay-shell.is-vertical .gameplay-zoom-panel.is-in-frame.has-detail-media .gameplay-zoom-media-wrap {
  min-height: 0;
}

.full-gameplay-shell.is-vertical .gameplay-zoom-panel.is-in-frame.has-detail-media .gameplay-zoom-img,
.full-gameplay-shell.is-vertical .gameplay-zoom-panel.is-in-frame.has-detail-media .gameplay-zoom-video {
  max-width: calc(100vw - 44px);
  max-height: 67vh;
  min-height: 0;
}

.full-gameplay-shell.is-vertical .gameplay-modal-backdrop.is-in-frame {
  padding: 10px;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame {
  width: 100%;
  height: 100%;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .panel-body {
  padding: 10px;
  max-height: 100%;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .safe-preview {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 0.85fr) auto auto;
  gap: 8px;
  padding: 10px;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .safe-door {
  min-height: 0;
  height: auto;
  max-height: 100%;
  width: min(100%, 220px);
  max-width: min(100%, 220px);
  aspect-ratio: 4 / 3;
  background-size: contain;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .safe-door::before {
  inset: 16px;
  border-width: 3px;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .safe-screen {
  left: 48%;
  top: 73%;
  width: 38%;
  height: 15%;
  right: auto;
  bottom: auto;
  min-width: 0;
  padding: 0 6px;
  font-size: clamp(12px, 3.4vw, 19px);
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .safe-keypad-image {
  width: min(100%, 166px);
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .pattern-preview {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: 8px;
  padding: 8px;
  width: min(100%, 280px);
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .pattern-frame {
  width: 100%;
  min-height: 0;
  padding: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  align-self: center;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .pattern-grid {
  width: 75%;
  justify-self: center;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .pattern-target-tile {
  width: 14px;
  height: 14px;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .jigsaw-preview {
  gap: 0;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .jigsaw-board {
  padding: 0;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .preview-status {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 12px;
}

.full-gameplay-hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(73px, 10.4vw, 135px);
  height: clamp(73px, 10.4vw, 135px);
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  background: transparent;
  z-index: 2;
}

.full-gameplay-hotspot:hover,
.full-gameplay-hotspot:focus-visible {
  outline: 2px solid rgba(255, 253, 248, 0.42);
  outline-offset: 2px;
  background: rgba(255, 253, 248, 0.05);
}

.full-gameplay-hotspot.is-disabled {
  pointer-events: none;
}

.full-gameplay-hotspot.is-lead-arrow {
  width: clamp(56px, 7.5vw, 92px);
  height: clamp(56px, 7.5vw, 92px);
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.full-gameplay-hotspot.is-lead-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(calc(var(--lead-arrow-angle, 90deg) - 90deg));
  animation: leadArrowSwing 2s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

@keyframes leadArrowSwing {
  0%,
  100% {
    transform: rotate(calc(var(--lead-arrow-angle, 90deg) - 90deg)) translate(0, 0);
  }
  50% {
    transform: rotate(calc(var(--lead-arrow-angle, 90deg) - 90deg)) translateX(7.5px);
  }
}

.full-gameplay-hotspot.is-hint-pulse::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.82) rotate(0deg);
  padding: 2px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 118deg,
      rgba(255, 253, 248, 0.98) 178deg,
      rgba(201, 162, 75, 0.95) 238deg,
      transparent 318deg,
      transparent 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 8px rgba(255, 238, 179, 0.7));
  animation: fullHintPulseCircle 1s linear forwards;
  pointer-events: none;
}

@keyframes fullHintPulseCircle {
  0% {
    opacity: 0;
    transform: scale(0.82) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: scale(1) rotate(72deg);
  }
  70% {
    opacity: 1;
    transform: scale(1) rotate(252deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.08) rotate(360deg);
  }
}

.gameplay-zoom-reward-pin.full-gameplay-hotspot,
.gameplay-zoom-reward-pin.full-gameplay-hotspot.is-unavailable {
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.gameplay-zoom-reward-pin.full-gameplay-hotspot.is-collected,
.gameplay-zoom-reward-pin.full-gameplay-hotspot.is-collected:hover,
.gameplay-zoom-reward-pin.full-gameplay-hotspot.is-collected:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

.gameplay-zoom-reward-pin.full-gameplay-hotspot:not(.is-collected):hover,
.gameplay-zoom-reward-pin.full-gameplay-hotspot:not(.is-collected):focus-visible {
  outline: 2px solid rgba(255, 253, 248, 0.42);
  outline-offset: 2px;
  background: rgba(255, 253, 248, 0.05);
}

.full-hint-control {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 5;
}

.full-hint-toggle {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 253, 248, 0.34);
  background: rgba(5, 5, 5, 0.72);
  color: #fffdf8;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.full-hint-toggle:hover,
.full-hint-toggle:focus-visible {
  background: rgba(255, 253, 248, 0.14);
  outline: 2px solid rgba(255, 253, 248, 0.42);
  outline-offset: 2px;
}

.full-inventory-control {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 20;
}

.full-inventory-toggle {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 253, 248, 0.34);
  background: rgba(5, 5, 5, 0.72);
  color: #fffdf8;
  display: grid;
  place-items: center;
  position: relative;
}

.full-inventory-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.full-inventory-toggle span {
  position: absolute;
  right: -4px;
  top: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #fffdf8;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.full-inventory-popover {
  position: absolute;
  right: 0;
  top: 58px;
  width: min(320px, calc(100vw - 76px));
  max-height: min(560px, calc(100dvh - 150px));
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: var(--radius);
  background: rgba(5, 5, 5, 0.9);
  color: #fffdf8;
  padding: 12px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
}

.full-inventory-popover > strong {
  padding-right: 34px;
}

.full-inventory-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.full-inventory-tab {
  min-width: 0;
  border: 1px solid rgba(255, 253, 248, 0.16);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.08);
  color: rgba(255, 253, 248, 0.74);
  padding: 7px 4px 6px;
  display: grid;
  justify-items: center;
  gap: 4px;
  cursor: pointer;
}

.full-inventory-tab svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.full-inventory-tab span {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}

.full-inventory-tab:hover,
.full-inventory-tab:focus-visible {
  background: rgba(255, 253, 248, 0.16);
  color: #fffdf8;
  outline: 2px solid rgba(255, 253, 248, 0.32);
  outline-offset: 2px;
}

.full-inventory-tab.is-active {
  border-color: rgba(182, 109, 58, 0.72);
  background: rgba(182, 109, 58, 0.28);
  color: #fffdf8;
}

.full-inventory-popover > .gameplay-popup-close.is-inventory-popover {
  top: 8px;
  left: 8px;
  right: auto;
  width: 26px;
  height: 26px;
}

.full-inventory-popover .full-gameplay-inventory-list {
  min-height: 0;
  max-height: min(460px, calc(100dvh - 210px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 253, 248, 0.38) rgba(255, 253, 248, 0.08);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}

.full-inventory-popover .full-gameplay-inventory-list::-webkit-scrollbar {
  width: 8px;
}

.full-inventory-popover .full-gameplay-inventory-list::-webkit-scrollbar-track {
  background: rgba(255, 253, 248, 0.08);
  border-radius: 999px;
}

.full-inventory-popover .full-gameplay-inventory-list::-webkit-scrollbar-thumb {
  background: rgba(255, 253, 248, 0.34);
  border-radius: 999px;
}

.full-inventory-popover .empty-state {
  background: rgba(255, 253, 248, 0.08);
  color: rgba(255, 253, 248, 0.72);
}

.full-inventory-popover .gameplay-item-chip {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(255, 253, 248, 0.1);
  color: #fffdf8;
  padding: 6px;
  display: flex;
  justify-content: flex-start;
  text-align: left;
  cursor: pointer;
}

.full-inventory-popover .gameplay-item-chip:hover,
.full-inventory-popover .gameplay-item-chip:focus-visible {
  background: rgba(255, 253, 248, 0.18);
  outline: 2px solid rgba(255, 253, 248, 0.36);
  outline-offset: 2px;
}

.full-inventory-popover .gameplay-item-chip.is-selected {
  background: rgba(182, 109, 58, 0.32);
  outline: 2px solid rgba(255, 253, 248, 0.72);
  outline-offset: 2px;
}

.full-inventory-popover .gameplay-item-chip .item-icon {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  font-size: 18px;
}

.full-inventory-item-backdrop {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 42px);
  background: rgba(0, 0, 0, 0.5);
}

.full-inventory-item-panel {
  position: relative;
  display: grid;
  place-items: center;
  gap: 14px;
  width: min(512px, calc(100% - 40px));
  color: #fffdf8;
}

.full-inventory-item-panel.is-new-reward {
  transform-origin: 50% 50%;
}

.full-inventory-item-panel.is-simple-item {
  cursor: pointer;
  touch-action: manipulation;
}

.full-inventory-item-panel.is-simple-item .full-inventory-item-image,
.full-inventory-item-panel.is-simple-item .full-inventory-item-fallback {
  pointer-events: none;
}

.full-inventory-item-media-wrap {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  background: #9a9068;
  border-radius: inherit;
  overflow: hidden;
}

.full-assembly-result-panel {
  animation: fullAssemblyResultFadeIn 1s ease both;
}

@keyframes fullInventoryRewardArrive {
  0% {
    opacity: 0.5;
    transform: scale(0.3) rotate(6deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.1) rotate(3deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes fullAssemblyResultFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.full-inventory-item-image {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 230px);
  object-fit: contain;
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.56);
}

.full-inventory-item-video {
  background: #050505;
}

.gameplay-complex-item-pins {
  border-radius: var(--radius);
  overflow: hidden;
}

.full-inventory-fly-item {
  position: absolute;
  z-index: 32;
  width: 86px;
  height: 86px;
  padding: 0;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(5, 5, 5, 0.34);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.52);
  pointer-events: none;
  will-change: transform, opacity;
}

.full-inventory-fly-item.is-fallback {
  display: grid;
  place-items: center;
  color: #fffdf8;
  background: linear-gradient(135deg, var(--teal), var(--maroon));
  font-size: 28px;
  font-weight: 800;
}

.full-inventory-item-fallback {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--teal), var(--maroon));
  color: #fffdf8;
  font-size: clamp(72px, 13vw, 150px);
  font-weight: 800;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.56);
}

.full-inventory-item-name {
  max-width: 100%;
  color: #fffdf8;
  /*font-size: clamp(18px, 3vw, 28px);*/
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.72);
  overflow-wrap: anywhere;
}

.full-inventory-item-close {
  position: absolute;
  top: -44px;
  right: -8px;
  z-index: 2;
  width: 38px;
  height: 38px;
  color: #fff;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.full-inventory-item-close:hover,
.full-inventory-item-close:focus-visible {
  color: #fff;
  background: transparent;
  outline: 2px solid rgba(255, 255, 255, 0.48);
  outline-offset: 2px;
}

/* Final gameplay UI skin based on dashboard/assets/UI-ref.png crops. */
.full-bottom-ui {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.full-bottom-ui.is-hint-only {
  z-index: 45;
}

.full-bottom-ui.is-hint-only > :not(.full-hint-control) {
  display: none;
}

.full-room-ui-layer > .full-bottom-ui,
.full-bottom-ui > * {
  pointer-events: none;
}

.full-bottom-ui > .full-hint-control,
.full-bottom-ui > .full-inventory-control,
.full-bottom-ui > .full-settings-toggle,
.full-bottom-ui > .full-settings-backdrop {
  pointer-events: auto;
}

.full-coin-counter {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  box-sizing: border-box;
  width: clamp(88px, 10.5%, 140px);
  aspect-ratio: 520 / 219;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.28em;
  padding: 0.35em 0.7em 0.35em 0.55em;
  min-width: 0;
  overflow: hidden;
  background: var(--collection-coinBackground, url("app-gui/skin-coins.png")) center / 100% 100% no-repeat;
  color: #fffdf8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10px, 1.15vw, 15px);
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  white-space: nowrap;
}

.full-coin-counter span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.full-coin-counter svg,
.full-coin-counter .ck-line-crown {
  width: 0.95em;
  height: 0.95em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75));
}

.full-settings-toggle {
  left: 0;
  bottom: 0;
  width: clamp(85px, 10.6%, 152px);
  height: auto;
  aspect-ratio: 350 / 344;
  border: 0;
  border-radius: 0;
  background: var(--collection-menuButton, url("app-gui/skin-menu.png")) left bottom / 100% 100% no-repeat;
  color: transparent;
  box-shadow: none;
}

.full-settings-toggle span {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
}

.full-settings-toggle:hover,
.full-settings-toggle:focus-visible {
  background: var(--collection-menuButton, url("app-gui/skin-menu.png")) left bottom / 100% 100% no-repeat;
  filter: brightness(1.4);
  outline: 0px solid rgba(255, 253, 248, 0.45);
  outline-offset: -8px;
}

.full-hint-control {
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  z-index: 9;
  width: clamp(88px, 8.9%, 133px);
  aspect-ratio: 357 / 553;
  background: var(--collection-hintButton, url("app-gui/skin-hints.png")) right bottom / 100% 100% no-repeat;
}

.full-hint-toggle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
}

.full-hint-toggle span,
.full-hint-toggle em {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
}

.full-hint-toggle:hover,
.full-hint-toggle:focus-visible {
  background: transparent;
  filter: none;
  outline: 0px solid rgba(255, 253, 248, 0.45);
  outline-offset: -8px;
}

.full-bottom-ui > .full-hint-control {
  pointer-events: none;
}

.full-bottom-ui > .full-hint-control .full-hint-toggle {
  pointer-events: auto;
}

.full-hint-control:has(.full-hint-toggle:hover),
.full-hint-control:has(.full-hint-toggle:focus-visible) {
  filter: brightness(1.4);
}

.gameplay-tip-panel.is-mini-pass {
  display: grid;
  gap: 16px;
}

.gameplay-mini-pass-button {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gameplay-mini-pass-button .ck-line-crown,
.gameplay-mini-pass-button svg {
  width: 1em;
  height: 1em;
}

.full-inventory-control {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 0;
  z-index: 20;
  width: min(47.4%, 644px);
  min-width: 305px;
  aspect-ratio: 1100 / 186;
  transform: translateX(-50%) translateY(5px);
  background: var(--collection-inventoryBackground, url("app-gui/skin-inventory-small-new.png?v=20260831arrows3")) center bottom / 100% 100% no-repeat;
  pointer-events: auto;
  overflow: visible;
}

.full-inventory-expand {
  position: absolute;
  /* Center of the metal frame; sit on the top bezel (rim ~y 2–8 of 186). */
  left: 48.273%;
  top: 0;
  bottom: auto;
  z-index: 3;
  width: clamp(54px, 12%, 78px);
  aspect-ratio: 270 / 103;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  display: grid;
  place-items: center;
  transform: translate(-50%, calc(-100% + 6px));
  cursor: pointer;
  box-shadow: none;
}

.full-inventory-expand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
}

.full-inventory-expanded-preload {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.full-inventory-expand.is-expanded img,
.full-inventory-control.is-expanded .full-inventory-expand img {
  transform: none;
}

.full-inventory-expand:hover,
.full-inventory-expand:focus-visible {
  filter: brightness(1.28);
  outline: 0;
}

.full-inventory-control.is-expanded {
  /* Same outer width as the small inventory bar. */
  width: min(47.4%, 644px);
  min-width: 305px;
  height: auto;
  max-height: min(92%, 92cqh);
  max-width: min(47.4%, 644px, calc(min(92%, 92cqh) * 1100/805));
  aspect-ratio: 1100 / 805;
  background: none;
  bottom: 0;
  top: auto;
  /* Sprite has 26px empty below the metal; small bar is flush with the screen bottom. */
  transform: translateX(-50%) translateY(calc(100% * 26 / 805));
  transform-origin: center bottom;
}

.full-inventory-control.is-expanded.is-animating,
.full-inventory-control.is-expanded.is-collapsing {
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}

.full-inventory-control.is-expanded.is-animating {
  transform: translateX(-50%) translateY(calc(100% * 593 / 805 + 5px)) translateZ(0);
  animation: inventoryExpandUp 0.95s cubic-bezier(0.45, 0.02, 0.12, 1) both;
}

.full-inventory-control.is-expanded.is-collapsing {
  transform: translateX(-50%) translateY(calc(100% * 26 / 805)) translateZ(0);
  animation: inventoryCollapseDown 0.86s cubic-bezier(0.4, 0, 0.15, 1) both;
}

@keyframes inventoryExpandUp {
  from {
    transform: translateX(-50%) translateY(calc(100% * 593 / 805 + 5px)) translateZ(0);
  }

  to {
    transform: translateX(-50%) translateY(calc(100% * 26 / 805)) translateZ(0);
  }
}

@keyframes inventoryCollapseDown {
  from {
    transform: translateX(-50%) translateY(calc(100% * 26 / 805)) translateZ(0);
  }

  to {
    transform: translateX(-50%) translateY(calc(100% * 593 / 805 + 5px)) translateZ(0);
  }
}

.full-inventory-control.is-expanded .full-inventory-expand {
  bottom: auto;
  top: 3.478%;
  /* Center of the metal panel (x 68–994), not the 1100 canvas. */
  left: 48.273%;
  width: clamp(48px, 11%, 70px);
  transform: translate(-50%, calc(-100% + 3px));
}

.full-inventory-expanded-shell {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--inventory-expanded-skin, url("app-gui/skin-inventory-big-new.png?v=20260828tabs2")) center / 100% 100% no-repeat;
  box-shadow: none;
  gap: 0;
  overflow: visible;
}

.full-inventory-expanded-shell::before,
.full-inventory-expanded-shell::after {
  display: none;
}

.full-inventory-control.is-expanded .full-inventory-arrow.is-expanded-arrow {
  display: none;
}

.full-inventory-side-tabs {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.full-inventory-side-tabs .full-inventory-tab:nth-child(1) {
  position: absolute;
  left: 90.727%;
  top: 4.099%;
  width: 7.091%;
  height: 9.689%;
}

.full-inventory-side-tabs .full-inventory-tab:nth-child(2) {
  position: absolute;
  left: 90.727%;
  top: 14.907%;
  width: 7.091%;
  height: 9.689%;
}

.full-inventory-side-tabs .full-inventory-tab {
  position: absolute;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: #f3e6c8;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
}

.full-inventory-side-tabs .full-inventory-tab img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
}

.full-inventory-side-tabs .full-inventory-tab span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

.full-inventory-control.is-expanded .full-inventory-side-tabs .full-inventory-tab:hover,
.full-inventory-control.is-expanded .full-inventory-side-tabs .full-inventory-tab:focus-visible,
.full-inventory-control.is-expanded .full-inventory-side-tabs .full-inventory-tab.is-active {
  filter: none;
  outline: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.22);
}

.full-inventory-control.is-expanded .full-gameplay-inventory-list .gameplay-item-chip {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8%;
}

.full-inventory-control.is-expanded .full-gameplay-inventory-list .gameplay-item-chip.is-empty {
  opacity: 0;
}

.full-inventory-assembly-items > .gameplay-item-chip {
  box-sizing: border-box;
  width: min(100%, 100cqh) !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  justify-self: center;
  align-self: center;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8%;
}

.full-inventory-assembly-row {
  position: absolute;
  z-index: 2;
  left: 13.273%;
  width: 69.091%;
  top: 75.155%;
  height: 14.907%;
  display: grid;
  grid-template-columns: minmax(0, 5.267fr) minmax(0, 1fr);
  align-items: stretch;
  column-gap: 1.053%;
}

.full-inventory-assembly-drop {
  position: relative;
  display: grid;
  place-items: stretch;
  min-width: 0;
  min-height: 0;
  border-radius: 10px;
  cursor: copy;
  background: transparent;
}

.full-inventory-assembly-drop.is-drop-target {
  box-shadow:
    inset 0 0 0 2px rgba(214, 172, 96, 0.7),
    0 0 14px rgba(214, 172, 96, 0.28);
  background: rgba(214, 172, 96, 0.06);
}

.full-inventory-assembly-items {
  position: absolute;
  z-index: 2;
  left: 3%;
  top: 10%;
  bottom: 10%;
  width: 78%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 3%;
  container-type: size;
  overflow: hidden;
  pointer-events: none;
}

.full-inventory-assembly-items > .gameplay-item-chip {
  pointer-events: auto;
}

.full-inventory-assembly-items > .gameplay-item-chip.is-empty {
  opacity: 0;
  pointer-events: none;
}

.full-inventory-assembly-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
}

.full-inventory-assembly-label span {
  color: #d6ac60;
  font-family: "Staatliches", Impact, sans-serif;
  font-size: clamp(14px, 2.4cqw, 28px);
  letter-spacing: 0.16em;
  opacity: 0.33;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.full-inventory-try {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #f3e6c8;
  font-family: "Staatliches", Impact, sans-serif;
  font-size: clamp(11px, 1.35vw, 16px);
  letter-spacing: 0.04em;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 4%;
}

.full-inventory-try img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  pointer-events: none;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.full-inventory-try span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

.full-inventory-try:hover,
.full-inventory-try:focus-visible {
  filter: brightness(1.16);
  outline: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(214, 172, 96, 0.4);
}

.full-inventory-try.is-fail-flash {
  animation: inventoryTryFailFlash 0.52s ease-out;
}

@keyframes inventoryTryFailFlash {
  0%,
  100% {
    box-shadow: none;
    background: transparent;
  }

  20%,
  55% {
    box-shadow:
      0 0 0 1px rgba(220, 64, 64, 0.85),
      0 0 18px rgba(220, 48, 48, 0.55);
    background: rgba(96, 28, 28, 0.55);
  }
}

.full-inventory-control.is-expanded .full-gameplay-inventory-list.is-expanded-grid {
  position: absolute;
  z-index: 1;
  left: 13.273%;
  width: 69.091%;
  top: 9.565%;
  height: 62.609%;
  right: auto;
  bottom: auto;
  aspect-ratio: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  column-gap: 1.053%;
  row-gap: 1.587%;
  align-items: stretch;
  justify-items: stretch;
}

.full-inventory-arrow {
  position: absolute;
  top: 34.946%;
  width: 4.545%;
  height: 44.086%;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.full-inventory-arrow svg {
  opacity: 0;
}

.full-inventory-control:not(.is-expanded) .full-inventory-arrow svg {
  display: none;
}

.full-inventory-arrow.is-left {
  left: 9.091%;
}

.full-inventory-arrow.is-right {
  left: 85.273%;
  right: auto;
  transform: rotate(180deg);
}

.full-inventory-control:not(.is-expanded) .full-inventory-arrow {
  top: 44.086%;
  width: 3.273%;
  height: 31.72%;
}

.full-inventory-control:not(.is-expanded) .full-inventory-arrow.is-left {
  left: 8.545%;
}

.full-inventory-control:not(.is-expanded) .full-inventory-arrow.is-right {
  left: 84.455%;
  top: 46.237%;
  width: 3.273%;
  height: 27.419%;
  transform: none;
}

.full-inventory-arrow:not(:disabled):hover,
.full-inventory-arrow:not(:disabled):focus-visible {
  outline: 0px solid rgba(255, 253, 248, 0.42);
  outline-offset: -10px;
  filter: brightness(1.4);
}

.full-inventory-arrow:disabled {
  cursor: default;
  opacity: 0.34;
}

.full-inventory-control:not(.is-expanded) .full-gameplay-inventory-list {
  position: absolute;
  left: 13.273%;
  width: 69.091%;
  top: 27.419%;
  height: 64.516%;
  right: auto;
  bottom: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  column-gap: 1.053%;
  row-gap: 0;
}

.full-inventory-control .gameplay-item-chip {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #fffdf8;
  padding: 6%;
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
}

.full-inventory-control .gameplay-item-chip.is-empty {
  pointer-events: auto;
  cursor: default;
}

.full-inventory-control .gameplay-item-chip.is-drag-source {
  opacity: 0.35;
}

.full-inventory-control .gameplay-item-chip.is-drop-target {
  background: rgba(255, 253, 248, 0.16);
  outline: 2px solid rgba(255, 220, 140, 0.9);
  outline-offset: -3px;
}

.gameplay-item-chip.is-drag-ghost {
  position: fixed;
  z-index: 200;
  margin: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  gap: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 9px;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: transparent;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

.gameplay-item-chip.is-drag-ghost .item-icon {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.gameplay-item-chip.is-drag-ghost .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.gameplay-item-chip.is-drag-ghost .gameplay-selected-item-marker,
.gameplay-item-chip.is-drag-ghost > span:not(.item-icon) {
  display: none;
}

.gameplay-item-chip.is-drag-ghost .item-icon {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.gameplay-item-chip.is-drag-ghost .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.gameplay-item-chip.is-drag-ghost .gameplay-selected-item-marker,
.gameplay-item-chip.is-drag-ghost > span:not(.item-icon) {
  display: none;
}

.full-inventory-control .gameplay-item-chip:hover,
.full-inventory-control .gameplay-item-chip:focus-visible {
  background: rgba(255, 253, 248, 0.08);
  outline: 2px solid rgba(255, 253, 248, 0.55);
  outline-offset: -3px;
}

.full-inventory-control .gameplay-item-chip.is-selected {
  background: rgba(255, 253, 248, 0.12);
  outline: 2px solid rgba(255, 253, 248, 0.82);
  outline-offset: -3px;
}

.full-inventory-control .gameplay-item-chip.is-inventory-blink {
  animation: fullInventorySlotBlink 0.48s ease-out both;
}

@keyframes fullInventorySlotBlink {
  0%,
  100% {
    box-shadow: none;
    outline-color: rgba(255, 253, 248, 0);
  }

  18%,
  58% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.98),
      0 0 18px rgba(255, 255, 255, 0.72);
    outline: 2px solid rgba(255, 255, 255, 0.98);
    outline-offset: -3px;
  }
}

.full-inventory-control .gameplay-item-chip .item-icon {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: transparent;
  font-size: clamp(18px, 2.3vw, 34px);
  box-shadow: none;
}

.full-inventory-control .gameplay-item-chip .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.full-inventory-control .gameplay-item-chip > span:not(.item-icon):not(.gameplay-selected-item-marker) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.full-inventory-control:not(.is-expanded) .full-inventory-tabs {
  position: absolute;
  top: 3.763%;
  left: 90.727%;
  right: auto;
  bottom: auto;
  width: 7.091%;
  height: 88.710%;
  display: block;
}

.full-inventory-control:not(.is-expanded) .full-inventory-tab:nth-child(1) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 47.273%;
}

.full-inventory-control:not(.is-expanded) .full-inventory-tab:nth-child(2) {
  position: absolute;
  left: 0;
  top: 52.727%;
  width: 100%;
  height: 47.273%;
}

.full-inventory-control .full-inventory-tab {
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: transparent;
  padding: 0;
  cursor: pointer;
}

.full-inventory-control .full-inventory-tab svg,
.full-inventory-control .full-inventory-tab span {
  opacity: 0;
}

.full-inventory-control .full-inventory-tab:hover,
.full-inventory-control .full-inventory-tab:focus-visible,
.full-inventory-control .full-inventory-tab.is-active {
  background: rgba(255, 253, 248, 0.11);
  outline: 0px solid rgba(255, 253, 248, 0.42);
  outline-offset: -4px;
  filter: brightness(1.4);
}

.full-settings-panel {
  width: min(390px, 100%);
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: 0;
  background:
    linear-gradient(rgba(255, 253, 248, 0.04), rgba(255, 253, 248, 0.01)),
    rgba(5, 5, 5, 0.92);
  font-family: "Manrope", system-ui, sans-serif;
}

.full-settings-title {
  justify-content: flex-start;
  padding-right: 34px;
  font-family: "Staatliches", Impact, sans-serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}

.full-settings-panel,
.full-settings-panel button,
.full-settings-panel input {
  font-family: "Manrope", system-ui, sans-serif;
}

.full-settings-panel .full-settings-title,
.full-settings-panel .full-settings-title span {
  font-family: "Staatliches", Impact, sans-serif;
}

.full-volume-row {
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  background: transparent;
}

.full-settings-panel .full-volume-label {
  align-self: center;
  line-height: 1;
}

.full-volume-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}

.full-volume-mute {
  width: 42px;
  height: 42px;
  border-radius: 999px;
}

.full-settings-panel .full-volume-slider {
  accent-color: #b82332;
}

.full-settings-actions {
  display: grid;
  gap: 12px;
  padding-top: 10px;
}

.full-settings-actions .button {
  justify-content: center;
  border-color: rgba(255, 253, 248, 0.16);
  background: #1e1f20;
  color: rgba(255, 253, 248, 0.88);
  font-weight: 800;
}

.full-settings-actions .button:hover,
.full-settings-actions .button:focus-visible {
  background: #2a2b2d;
}

.full-settings-actions .button.is-settings-restart {
  border-color: rgba(182, 109, 58, 0.82);
  color: #d28a4f;
}

.full-settings-actions .button.is-settings-restart-end {
  margin-bottom: 14px;
}

.full-settings-panel.is-restart-confirm .full-settings-title {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.full-settings-confirm-text {
  margin: 0;
  color: rgba(255, 253, 248, 0.78);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.full-settings-confirm-text strong {
  color: #fffdf8;
  font-weight: 800;
}

.full-settings-actions .button.danger {
  border-color: rgba(184, 35, 50, 0.9);
  background: #1e1f20;
  color: #e24b59;
}

.full-gameplay-shell.is-vertical .full-settings-toggle {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: clamp(73px, 21.2%, 110px);
}

.full-gameplay-shell.is-vertical .full-hint-control {
  position: relative;
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  top: auto;
  left: auto;
  right: 0;
  bottom: auto;
  width: clamp(78px, 21.7%, 105px);
}

.full-gameplay-shell.is-vertical .full-coin-counter {
  top: 0;
  right: 0;
  width: clamp(76px, 24%, 108px);
  font-size: clamp(10px, 2.4vw, 13px);
  font-family: "Manrope";
  padding: 0.3em 0.65em 0.3em 0.5em;
}

.full-gameplay-shell.is-vertical .full-inventory-control {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 3;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1100 / 186;
  transform: translateY(5px);
}

.full-gameplay-shell.is-vertical .full-inventory-control.is-expanded {
  aspect-ratio: 1100 / 805;
  width: min(92%, 644px);
  max-height: min(92%, 92cqh);
  max-width: min(92%, 644px, calc(min(92%, 92cqh) * 1100 / 805));
  height: auto;
  justify-self: center;
  align-self: end;
  transform: translateY(calc(100% * 26 / 805));
}

.full-gameplay-shell.is-vertical .full-inventory-control.is-expanded.is-animating {
  transform: translateY(calc(100% * 593 / 805 + 5px)) translateZ(0);
  animation: inventoryExpandUpVertical 0.95s cubic-bezier(0.45, 0.02, 0.12, 1) both;
}

.full-gameplay-shell.is-vertical .full-inventory-control.is-expanded.is-collapsing {
  transform: translateY(calc(100% * 26 / 805)) translateZ(0);
  animation: inventoryCollapseDownVertical 0.86s cubic-bezier(0.4, 0, 0.15, 1) both;
}

@keyframes inventoryExpandUpVertical {
  from {
    transform: translateY(calc(100% * 593 / 805 + 5px)) translateZ(0);
  }

  to {
    transform: translateY(calc(100% * 26 / 805)) translateZ(0);
  }
}

@keyframes inventoryCollapseDownVertical {
  from {
    transform: translateY(calc(100% * 26 / 805)) translateZ(0);
  }

  to {
    transform: translateY(calc(100% * 593 / 805 + 5px)) translateZ(0);
  }
}

.full-gameplay-shell.is-vertical .full-bottom-ui {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 0;
}

.hotspot-row.is-active {
  border-color: var(--teal);
  box-shadow: inset 4px 0 0 var(--teal);
}

.hotspot-subpanel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.hotspot-collapsible-subpanel {
  padding: 0;
  overflow: visible;
}

.hotspot-subpanel-toggle {
  width: 100%;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.hotspot-subpanel-toggle .field-label {
  margin: 0;
}

.hotspot-subpanel-toggle .panel-collapse-icon {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--muted);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.hotspot-subpanel-toggle .panel-collapse-icon svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  transition: transform 0.16s ease;
}

.hotspot-subpanel-toggle:hover,
.hotspot-subpanel-toggle:focus-visible {
  outline: 0;
  background: rgba(35, 120, 117, 0.06);
}

.hotspot-subpanel-body {
  padding: 0 12px 12px;
  display: grid;
  gap: 10px;
}

.hotspot-collapsible-subpanel.is-collapsed .hotspot-subpanel-body {
  display: none;
}

.item-collectable-panel {
  margin-top: 10px;
}

.zoom-gives-mode,
.manual-gives-panel {
  display: grid;
  gap: 10px;
}

.manual-gives-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: #201b17;
}

.manual-gives-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 15, 11, 0.03), rgba(20, 15, 11, 0.22));
  pointer-events: none;
}

.manual-gives-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #201b17;
}

.complex-item-pin-panel .manual-gives-map {
  aspect-ratio: 1 / 1;
  min-height: 260px;
}

.manual-give-pin {
  position: absolute;
  min-width: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fffdf8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -17px);
  z-index: 2;
  cursor: pointer;
}

.manual-give-pin-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fffdf8;
  background: rgba(35, 120, 117, 0.86);
  box-shadow: 0 0 0 6px rgba(35, 120, 117, 0.18), 0 10px 20px rgba(0, 0, 0, 0.28);
  display: grid;
  place-items: center;
}

.manual-give-pin span:last-child {
  max-width: 170px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.72);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
  overflow-wrap: anywhere;
}

.manual-give-pin.is-active .manual-give-pin-icon {
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(182, 109, 58, 0.24), 0 10px 20px rgba(0, 0, 0, 0.28);
}

.manual-give-pin.is-closeup .manual-give-pin-icon {
  background: rgba(176, 122, 42, 0.9);
  box-shadow: 0 0 0 6px rgba(176, 122, 42, 0.2), 0 10px 20px rgba(0, 0, 0, 0.28);
}

.manual-give-pin svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.zoom-closeup-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.zoom-closeup-param-stack {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 4px;
}

.zoom-closeup-param-banner {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: 8px;
  background: rgba(201, 162, 75, 0.08);
}

.zoom-closeup-crumb {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  margin-left: calc(var(--closeup-depth, 0) * 4px);
}

.zoom-closeup-crumb.is-current {
  pointer-events: none;
  font-weight: 800;
}

.zoom-closeup-crumb.is-ancestor {
  font-weight: 700;
}

.zoom-closeup-crumb-sep {
  color: var(--muted);
}

.zoom-closeup-pin-panel .row-head {
  align-items: flex-start;
}

.zoom-closeup-child-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.zoom-closeup-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffefb;
  padding-left: calc(8px + (var(--closeup-depth, 1) - 1) * 12px);
}

.zoom-closeup-child.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(182, 109, 58, 0.16);
}

.zoom-closeup-child.is-dragging {
  opacity: 0.55;
}

.zoom-closeup-child.is-drop-target {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(35, 120, 117, 0.18);
}

.zoom-closeup-drag-handle {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  line-height: 1;
  padding: 4px 2px;
}

.zoom-closeup-child-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.zoom-closeup-child-dash {
  color: var(--muted);
  font-weight: 600;
  flex: 0 0 auto;
}

.zoom-closeup-child-rename {
  min-width: 0;
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  font-weight: 700;
}

.hotspot-mini-config {
  display: grid;
  gap: 14px;
}

.mini-type-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffefb;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.mini-type-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.hotspot-mini-asset-row {
  background: #fffefb;
}

.hotspot-mini-asset-row.is-managed {
  grid-template-columns: minmax(0, 0.8fr) minmax(260px, 1.2fr);
  align-items: start;
}

.hotspot-mini-asset-row.is-managed .editor-managed-asset-card {
  width: 100%;
}

.zoom-detail-stack {
  display: grid;
  gap: 16px;
}

.detail-asset-panel {
  display: grid;
  gap: 10px;
}

.detail-asset-preview {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffefb;
  padding: 8px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.detail-asset-preview img,
.detail-asset-preview video {
  width: 96px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.detail-asset-preview span {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.next-room-link {
  justify-content: flex-start;
  width: fit-content;
}

.item-checklist {
  display: grid;
  gap: 8px;
}

.item-checklist.active-point-item-checklist {
  display: block;
}

.item-checklist.active-point-item-checklist .check-row{
  display: inline-flex;
  width: 200px;
  height: 25px;
  overflow: hidden;
}

.item-multi-select {
  position: relative;
  z-index: 5;
}

.item-multi-select.is-open {
  z-index: 20;
}

.item-multi-select-control {
  width: 100%;
  min-height: 42px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

.item-multi-select-chips {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.item-multi-chip {
  max-width: 150px;
  min-width: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #416c8d;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.gameplay-selected-item-marker {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: clamp(16px, 1.8vw, 22px);
  height: clamp(16px, 1.8vw, 22px);
  transform: translateX(-50%);
  border: 1px solid rgba(255, 253, 248, 0.78);
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.88);
  color: #fffdf8;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.gameplay-selected-item-marker.is-complex {
  color: #f0c15a;
}

.gameplay-selected-item-marker svg {
  width: 68%;
  height: 68%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gameplay-selected-item-marker img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
}

.item-multi-chip span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-multi-chip-remove {
  font-weight: 700;
  opacity: .85;
}

.item-multi-placeholder,
.item-multi-caret {
  color: var(--muted);
  font-size: 13px;
}

.item-multi-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 360px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(33, 26, 18, .18);
  display: grid;
  gap: 8px;
  overflow: auto;
}

.item-multi-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.item-multi-tab {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
}

.item-multi-tab.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.item-multi-search {
  position: relative;
  display: block;
}

.item-multi-search .input {
  padding-right: 30px;
}

.item-multi-search span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.item-multi-options {
  display: grid;
  gap: 2px;
}

.item-multi-option {
  position: relative;
  width: 100%;
  min-height: 31px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.item-multi-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.item-multi-checkbox {
  width: 17px;
  height: 17px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: #fff;
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
}

.item-multi-option input:checked + .item-multi-checkbox,
.item-multi-select-all[data-selected="true"] .item-multi-checkbox,
.item-multi-select-all.is-partial .item-multi-checkbox {
  background: #416c8d;
  border-color: #416c8d;
}

.item-multi-checkbox svg {
  width: 12px;
  height: 12px;
}

.item-multi-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-multi-option-room {
  max-width: 120px;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
}

.check-row input {
  accent-color: var(--teal);
}

.hotspot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.range-field {
  display: grid;
  gap: 6px;
}

.range-field input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.mini-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 16px;
  display: grid;
  gap: 14px;
  box-shadow: var(--shadow);
}

.mini-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 18px 45px rgba(131, 70, 32, 0.16);
}

.mini-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.mini-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e6eee9;
  color: var(--teal);
  flex: 0 0 auto;
}

.mini-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-action.is-active {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: #f8eadc;
}

.mini-detail-panel {
  margin-bottom: 16px;
}

.mini-detail-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(420px, 1.08fr);
  gap: 18px;
  align-items: start;
}

.mini-detail-layout:has(.glyph-picker-field) {
  grid-template-columns: minmax(560px, 1.25fr) minmax(360px, 0.75fr);
}

.mini-editor-column,
.mini-preview-column,
.mini-subsection,
.mini-answer-list,
.mini-asset-list {
  display: grid;
  gap: 12px;
}

.mini-subsection {
  padding-bottom: 4px;
}

.mini-subtitle {
  font-weight: 780;
  color: var(--ink);
}

.field-help {
  color: var(--soft);
  font-size: 12px;
  line-height: 1.35;
}

.field-help.is-error {
  color: var(--danger);
  font-weight: 700;
}

.color-definition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.color-definition-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.color-definition-row span {
  color: var(--muted);
  font-size: 12px;
}

.symbol-sequence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.symbol-sequence-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  padding: 8px;
  display: grid;
  gap: 8px;
}

.symbol-sequence-row > span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.symbol-sequence-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.symbol-sequence-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  color: var(--ink);
}

.symbol-sequence-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.symbol-sequence-option .ring-symbol-glyph {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  box-shadow: none;
}

.symbol-sequence-option .ring-symbol-glyph.sheet-glyph {
  background-color: transparent;
  border: 0;
}

.symbol-sequence-option em {
  font-style: normal;
  font-size: 12px;
  text-transform: capitalize;
}

.symbol-sequence-option:hover {
  border-color: rgba(216, 164, 51, 0.65);
}

.symbol-sequence-option.is-selected {
  border-color: #c9a24a;
  background: linear-gradient(180deg, #fff6df, #f3e0a8);
  box-shadow: inset 0 1px 0 rgba(255, 248, 224, 0.8);
}

.glyph-picker-field {
  display: grid;
  gap: 10px;
}

.glyph-picker-field > label {
  font-weight: 700;
}

.glyph-picker-grid {
  display: grid;
  grid-template-columns: repeat(var(--glyph-cols, 10), minmax(64px, 1fr));
  gap: 12px;
  max-height: min(72vh, 720px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #1a1612;
  min-height: 420px;
}

.glyph-picker-cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 64px;
  min-height: 64px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  overflow: hidden;
  background: #070605;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.glyph-picker-cell input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.glyph-picker-tile {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #070605;
  background-clip: padding-box;
  border-radius: 50%;
}

.glyph-picker-cell:hover {
  border-color: rgba(216, 164, 51, 0.7);
}

.glyph-picker-cell.is-selected {
  border-color: #d8a433;
  box-shadow: 0 0 0 2px rgba(216, 164, 51, 0.35);
}

.symbol-sequence-field.is-selects .symbol-sequence-selects {
  display: grid;
  gap: 8px;
}

.symbol-sequence-select-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefb;
  padding: 10px;
}

.symbol-sequence-select-row > span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.symbol-sequence-select-preview {
  display: grid;
  place-items: center;
}

.symbol-sequence-select-preview .ring-symbol-glyph {
  width: 64px;
  height: 64px;
}

.symbol-sequence-select-preview .ring-symbol-glyph.sheet-glyph {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.color-definition-row input[type="color"] {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  padding: 3px;
}

.mini-asset-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffefb;
  padding: 10px;
}

.mini-asset-row strong,
.mini-asset-row span,
.mini-asset-row em {
  display: block;
}

.mini-asset-row span,
.mini-asset-row p,
.mini-asset-row em {
  color: var(--muted);
  font-size: 12px;
}

.mini-asset-row p {
  margin: 4px 0 0;
  line-height: 1.35;
}

.asset-button-stack {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.asset-button-stack .file-button,
.asset-button-stack .button {
  justify-content: center;
  width: 100%;
}

.mini-asset-thumb {
  width: 78px;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--line);
  object-fit: cover;
  background: var(--panel-2);
}

.mini-asset-audio-thumb {
  display: grid;
  place-items: center;
  color: var(--teal);
}

.mini-asset-empty-thumb {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 8px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.mini-asset-empty-thumb svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.mini-asset-audio-thumb svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.mini-asset-audio-control {
  width: min(100%, 280px);
  height: 34px;
  margin-top: 8px;
  display: block;
}

.mini-preview-surface {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffefb;
  padding: 14px;
  display: grid;
  gap: 12px;
  min-height: 360px;
}

.mini-preview-asset {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 190px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.mini-preview-asset.wide {
  aspect-ratio: 3 / 1;
  max-height: 150px;
}

.mini-code-note,
.keypad-display,
.mini-decoded-line {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  padding: 10px 12px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.keypad-preview {
  max-width: 420px;
}

.keypad-display {
  text-align: center;
  font-size: 24px;
  font-weight: 760;
}

.keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.keypad-key,
.pattern-tile {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  min-height: 44px;
}

.keypad-key:hover,
.pattern-tile:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.mini-target-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  align-items: center;
}

.mini-target-line span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  padding: 4px 9px;
  color: var(--ink);
}

.pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pattern-cols, 2), minmax(0, 1fr));
  gap: 5px;
}

.pattern-preview {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  justify-items: stretch;
  width: min(100%, 480px);
  margin-inline: auto;
  min-height: 0;
  padding: 10px;
  gap: 10px;
  background-color: #1a2428;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  overflow: hidden;
}

.pattern-preview .pattern-frame {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.pattern-preview .pattern-grid.art-grid {
  width: 75%;
  max-width: 75%;
  justify-self: center;
  aspect-ratio: 1 / 1;
  padding: 4px;
  background: transparent;
  box-shadow: none;
}

.pattern-preview .pattern-tile {
  min-height: 0;
}

.pattern-tile {
  position: relative;
  min-height: 65px;
  font-weight: 760;
  text-transform: capitalize;
  overflow: hidden;
}

.pattern-tile.is-selected {
  border-color: var(--accent);
  background: #f8eadc;
}

.pattern-tile::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 2;
  border: 1px solid rgba(255, 239, 183, 0.88);
  box-shadow:
    inset 0 0 14px rgba(255, 232, 168, 0.48),
    0 0 18px rgba(209, 170, 98, 0.44);
  opacity: 0;
  pointer-events: none;
}

.pattern-preview.is-solved .pattern-tile {
  animation: jigsawPiecePulse 2.55s ease-out both;
  animation-delay: calc(var(--tile-index, 0) * 42ms);
}

.pattern-preview.is-solved .pattern-tile::after {
  opacity: 1;
  animation: jigsawSparkSettle 2.65s ease-out both;
  animation-delay: calc(var(--tile-index, 0) * 42ms);
}

.button-selection-editor {
  display: grid;
  gap: 12px;
}

.button-selection-editor-map {
  min-height: 280px;
  height: min(52vh, 460px);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #070707;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.button-selection-image-stage {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
}

.mini-solving-flash {
  z-index: 12;
}

.mini-solving-intro-editor {
  gap: 8px;
}

.mini-solving-duration-value {
  min-width: 4.8rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mini-tutorial-preview {
  display: grid;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.mini-tutorial-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}

.mini-tutorial-delay {
  display: grid;
  gap: 6px;
}

.mini-tutorial-preview-board .button-selection-choice {
  pointer-events: none;
  cursor: default;
}

.mini-tutorial-click-dot {
  position: absolute;
  z-index: 16;
  width: clamp(72px, 16vw, 128px);
  height: clamp(72px, 16vw, 128px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 214, 32, 0.42);
  border: 3px solid rgba(255, 220, 64, 0.88);
  box-shadow: 0 0 28px rgba(255, 214, 32, 0.45);
  pointer-events: none;
  animation: miniTutorialClickPulse 420ms ease-out;
}

.clue-solving-preview.is-solved:has(.clue-solving-success) .mini-tutorial-click-dot {
  display: none;
}

.mini-tutorial-preview-board .cipher-preview.is-tutorial .cipher-hub-rotate,
.mini-tutorial-preview-board .cipher-preview.is-tutorial .cipher-key,
.mini-tutorial-preview-board .cipher-preview.is-tutorial .cipher-answer-input,
.mini-tutorial-preview-board .cipher-preview.is-tutorial .cipher-answer-submit {
  pointer-events: none;
  cursor: default;
}

.cipher-tutorial-caption {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(28, 24, 20, 0.72);
  color: #faf6ee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}

.cipher-tutorial-chrome {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.cipher-tutorial-help {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(250, 246, 238, 0.45);
  background: rgba(28, 24, 20, 0.72);
  color: #faf6ee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.cipher-preview.is-tutorial .cipher-hub-rotate,
.cipher-preview.is-tutorial .cipher-key,
.cipher-preview.is-tutorial .cipher-answer-input,
.cipher-preview.is-tutorial .cipher-answer-submit {
  pointer-events: none;
  cursor: default;
}

.cipher-letter.is-tutorial-hit,
.cipher-hub-rotate.is-tutorial-hit,
.cipher-key.is-tutorial-hit {
  z-index: 8;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(255, 220, 64, 0.95), 0 0 18px rgba(255, 214, 32, 0.65);
}

.cipher-key.is-tutorial-hit {
  position: relative;
}

.cipher-hub-rotate.is-tutorial-hit::after,
.cipher-key.is-tutorial-hit::after,
.cipher-letter.is-tutorial-hit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(36px, 9cqw, 56px);
  height: clamp(36px, 9cqw, 56px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 214, 32, 0.38);
  border: 2px solid rgba(255, 220, 64, 0.88);
  pointer-events: none;
  animation: miniTutorialClickPulse 420ms ease-out;
}

.cipher-preview.is-solved .cipher-letter.is-tutorial-hit::after,
.cipher-preview.is-solved .cipher-hub-rotate.is-tutorial-hit::after,
.cipher-preview.is-solved .cipher-key.is-tutorial-hit::after {
  display: none;
}

@keyframes miniTutorialClickPulse {
  from {
    transform: translate(-50%, -50%) scale(0.55);
    opacity: 0.35;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.button-selection-editor-map .button-selection-image-stage {
  cursor: crosshair;
}

.button-selection-image-stage > img,
.button-selection-board-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  object-position: center;
}

.button-selection-editor-pin,
.button-selection-choice {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 850;
  color: #fffdf8;
}

.button-selection-editor-pin {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 253, 248, 0.86);
  background: rgba(32, 35, 38, 0.82);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.24), 0 8px 18px rgba(0, 0, 0, 0.34);
}

.button-selection-editor-pin.is-answer {
  background: rgba(88, 123, 70, 0.92);
}

.button-selection-editor-pin.is-decoy {
  background: rgba(139, 63, 83, 0.88);
}

.button-selection-editor-pin.is-active {
  outline: 3px solid rgba(216, 164, 51, 0.82);
  outline-offset: 3px;
}

.number-lock-pin-editor .button-selection-editor-pin.is-digit {
  background: rgba(32, 35, 38, 0.86);
}

.number-lock-pin-editor .button-selection-editor-pin.is-utility {
  background: rgba(139, 63, 83, 0.9);
}

.number-lock-pin-editor .button-selection-editor-pin[data-key-id="c"] {
  background: rgba(88, 123, 70, 0.92);
}

.safe-lock-pin-editor .button-selection-editor-pin {
  min-width: 4.6em;
  font-size: 11px;
}

.safe-lock-pin-editor .button-selection-editor-pin.is-digit {
  background: rgba(32, 35, 38, 0.86);
}

.safe-lock-pin-editor .button-selection-editor-pin.is-utility {
  background: rgba(139, 63, 83, 0.9);
}

.safe-lock-pin-editor .button-selection-editor-map,
.safe-lock-pin-map {
  height: min(52vh, 460px);
  min-height: 220px;
}

.safe-lock-pin-editor .safe-lock-board {
  height: 100%;
}

.button-selection-pin-controls {
  display: grid;
  gap: 10px;
}

.button-selection-board {
  min-height: 420px;
  height: min(58vh, 560px);
  border-radius: 8px;
  border: 1px solid rgba(255, 253, 248, 0.16);
  background: #070707;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.48);
}

.button-selection-choice {
  width: clamp(37px, 7.2vw, 58px);
  height: clamp(37px, 7.2vw, 58px);
  border: 2px solid rgba(255, 253, 248, 0.72);
  background: transparent;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.36), 0 0 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.button-selection-choice:hover,
.button-selection-choice.is-selected {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: rgba(216, 164, 51, 0.96);
  box-shadow:
    0 0 0 5px rgba(0, 0, 0, 0.22),
    0 0 0 5px rgba(216, 164, 51, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.4);
}

.button-selection-choice.is-selected {
  filter: brightness(1.16) saturate(1.1);
}

.button-selection-choice.is-correct {
  animation: buttonSelectionChoicePulse 2.55s ease-out both;
  animation-delay: calc(var(--button-index, 0) * 42ms);
  background: transparent;
}

.button-selection-choice.is-wrong {
  
  background: transparent;
}

.button-selection-choice::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid rgba(255, 239, 183, 0.88);
  box-shadow:
    inset 0 0 14px rgba(255, 232, 168, 0.48),
    0 0 18px rgba(209, 170, 98, 0.44);
  opacity: 0;
  pointer-events: none;
}

.button-selection-preview.is-solved .button-selection-choice.is-correct::after {
  opacity: 1;
  animation: jigsawSparkSettle 2.65s ease-out both;
  animation-delay: calc(var(--button-index, 0) * 42ms);
}

.clue-solving-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.clue-solving-path {
  stroke: var(--clue-thread, #d8a433);
  stroke-width: calc(1.15 * var(--clue-thread-scale, 1));
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.55));
}

.clue-solving-lines.is-mismatch .clue-solving-path {
  stroke-width: calc(3.45 * var(--clue-thread-scale, 1));
}

.clue-solving-node {
  fill: var(--clue-thread, #d8a433);
}

.clue-solving-choice {
  z-index: 3;
}

.clue-solving-step {
  font-size: clamp(12px, 2.1vw, 16px);
  font-weight: 850;
  color: #fffdf8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.clue-solving-label {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  z-index: 2;
  max-width: 9.5em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.78);
  border: 1px solid rgba(255, 253, 248, 0.28);
  color: #fffdf8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clue-solving-sequence-controls {
  display: flex;
  gap: 8px;
}

.clue-solving-editor .button-selection-editor-pin {
  z-index: 3;
}

.clue-solving-success {
  position: absolute;
  inset: 0;
  z-index: 4;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.clue-solving-preview-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
}

.clue-solving-dev-reset {
  justify-self: start;
  width: max-content;
}

.gameplay-mini-modal.is-in-frame .clue-solving-preview-shell,
.gameplay-mini-modal.is-in-frame .clue-solving-preview,
.gameplay-mini-modal.is-in-frame .clue-solving-board {
  min-height: 0;
  height: 100%;
}

@keyframes buttonSelectionChoicePulse {
  0% {
    filter: brightness(1);
    transform: translate(-50%, -50%) scale(1);
  }

  18% {
    filter: brightness(1.22) saturate(1.08);
    transform: translate(-50%, -50%) scale(1.018);
  }

  68% {
    filter: brightness(1.12) saturate(1.04);
    transform: translate(-50%, -50%) scale(1.006);
  }

  100% {
    filter: brightness(1);
    transform: translate(-50%, -50%) scale(1);
  }
}

.simon-says-preview {
  display: grid;
  gap: 12px;
}

.mini-count-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mini-count-stepper-value {
  width: 4.5rem;
  text-align: center;
  font-weight: 700;
}

.simon-says-board {
  min-height: 420px;
  height: min(58vh, 560px);
  border-radius: 8px;
  border: 1px solid rgba(255, 253, 248, 0.16);
  background: #070707;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.48);
}

.simon-says-pad {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(42px, 8vw, 68px);
  height: clamp(42px, 8vw, 68px);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--pad-color, #f0c24b) 40%, transparent);
  background: color-mix(in srgb, var(--pad-color, #f0c24b) 10%, transparent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0.55;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background 140ms ease, opacity 140ms ease;
}

.simon-says-pad:hover:not(:disabled),
.simon-says-pad:focus-visible:not(:disabled) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
  filter: brightness(1.12);
}

.simon-says-pad:disabled {
  cursor: default;
}

.simon-says-pad.is-flashing {
  opacity: 1;
  background: color-mix(in srgb, var(--pad-color, #f0c24b) 72%, #fffdf8);
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.28),
    0 0 0 8px color-mix(in srgb, var(--pad-color, #f0c24b) 35%, transparent),
    0 0 34px color-mix(in srgb, var(--pad-color, #f0c24b) 70%, transparent);
  filter: brightness(1.28) saturate(1.15);
  transform: translate(-50%, -50%) scale(1.12);
}

.simon-says-controls {
  display: grid;
  gap: 10px;
}

.simon-says-status {
  font-weight: 700;
  color: rgba(255, 253, 248, 0.9);
}

.simon-says-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.simon-says-preview.is-solved .simon-says-status {
  color: #b7d59a;
}

.simon-says-preview.phase-wrong .simon-says-status {
  color: #e2a0ad;
}

.simon-says-pad-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.simon-says-pad-count-label {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
}

.simon-says-pad-count-label span {
  min-width: 1.5rem;
  font-size: 1.15em;
}

.simon-says-pad-settings-list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.simon-says-pad-settings {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.03);
}

.simon-says-pad-settings.is-active {
  border-color: rgba(216, 164, 51, 0.55);
}

.simon-says-pad-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.simon-says-pad-settings-title {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 750;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.simon-says-pad-sound {
  display: grid;
  gap: 6px;
}

.simon-says-round-editor {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.simon-says-round-list {
  display: grid;
  gap: 8px;
}

.simon-says-round-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.simon-says-round-label {
  font-weight: 700;
  white-space: nowrap;
}

.simon-says-pad-sound {
  display: grid;
  gap: 6px;
}

.simon-says-editor .button-selection-editor-pin {
  background: color-mix(in srgb, var(--pad-color, #3fbf6a) 78%, #202326);
}

.assembly-slots,
.assembly-pieces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
}

.assembly-slots span {
  min-height: 48px;
  min-width: 96px;
  border: 0;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  text-transform: capitalize;
  background: var(--panel-2);
}

.transcript-box {
  display: grid;
  gap: 10px;
}

.transcript-box label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.switch-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.logic-switch {
  display: block;
  position: relative;
  width: 100%;
  height: clamp(68px, 10vw, 116px);
  min-height: 0;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease, background-position 0.18s ease;
}

.logic-switch span {
  display: none;
}

.logic-switch::before,
.logic-switch::after {
  content: "";
  display: none;
}

.logic-switch:hover,
.logic-switch:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
  outline: none;
}

.logic-switch.is-on {
  background-position: 100% 50%;
}

.logic-switch.is-off {
  background-position: 0% 50%;
}

.switch-pattern-field {
  display: grid;
  gap: 8px;
}

.switch-pattern-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
}

.switch-pattern-toggle {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-weight: 760;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.switch-pattern-toggle.is-on {
  background: #1f6b4a;
  border-color: #3ecf8e;
  color: #e8fff4;
  box-shadow: inset 0 0 0 1px rgba(62, 207, 142, 0.35), 0 0 12px rgba(62, 207, 142, 0.28);
}

.switch-pattern-toggle.is-off {
  background: #7a2a2a;
  border-color: #e05a5a;
  color: #ffe8e8;
  box-shadow: inset 0 0 0 1px rgba(224, 90, 90, 0.35), 0 0 12px rgba(224, 90, 90, 0.22);
}

.switch-pattern-toggle:hover,
.switch-pattern-toggle:focus-visible {
  filter: brightness(1.08);
  outline: none;
}

.preview-status {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
}

.preview-status.is-solved {
  border-color: rgba(88, 123, 70, 0.45);
  background: #e3eddf;
  color: #385b32;
}

.preview-status.is-failed {
  border-color: rgba(139, 63, 83, 0.48);
  background: #f0dfe3;
  color: #763448;
}

.preview-status svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.graphic-preview {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(247, 243, 235, 0.9)),
    repeating-linear-gradient(90deg, rgba(32, 35, 38, 0.04) 0 1px, transparent 1px 26px);
}

.cipher-preview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #e8dfd0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: min(100%, 680px);
  margin: 0 auto;
  min-height: 360px;
  padding: 34px 38px 22px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.gameplay-mini-modal.is-in-frame .panel-body:has(.cipher-preview) {
  container-type: size;
  display: grid;
  place-items: center;
  align-content: center;
}

.gameplay-mini-modal.is-in-frame .mini-preview-surface.cipher-preview {
  width: min(100%, calc(100cqh * 16 / 9));
  height: min(100%, calc(100cqw * 9 / 16));
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  padding: 2px 8px 8px 2px;
  background-color: #141820;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  align-content: space-between;
}

.cipher-scene {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(190px, 1.15fr);
  grid-template-areas:
    "note dial"
    "controls dial";
  gap: 12px;
  align-items: start;
}

.cipher-note-panel {
  grid-area: note;
  display: grid;
  align-content: start;
}

.cipher-note {
  min-height: 300px;
  position: relative;
  border-radius: 6px;
  border: 1px solid rgba(92, 69, 24, 0.22);
  background-size: cover;
  background-position: center;
  display: block;
  padding: 0;
  color: #3d2b1f;
  box-shadow: inset 0 0 0 999px rgba(242, 230, 207, 0.18);
  transition: box-shadow 280ms ease, border-color 280ms ease;
}

.cipher-note.is-decoded {
  border-color: rgba(168, 122, 48, 0.55);
  box-shadow:
    inset 0 0 0 999px rgba(255, 244, 214, 0.28),
    0 0 0 1px rgba(212, 175, 55, 0.35),
    0 10px 24px rgba(139, 105, 20, 0.22);
}

.cipher-note.is-decoded .cipher-note-caption span {
  color: rgba(120, 84, 28, 0.82);
}

.cipher-note.is-decoded .cipher-note-caption strong {
  color: #6b4f1d;
  text-shadow: 0 1px 0 rgba(255, 248, 230, 0.65);
}

.cipher-note-caption {
  position: absolute;
  left: 17%;
  right: 17%;
  top: 38%;
  bottom: 16%;
  display: grid;
  align-content: center;
  gap: 8px;
  justify-items: center;
  width: auto;
  text-align: center;
}

.cipher-note span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 780;
  letter-spacing: 0.12em;
  color: rgba(92, 69, 24, 0.72);
}

.cipher-note strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #3d2b1f;
}

.cipher-dial-wrap {
  grid-area: dial;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.cipher-dial-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.cipher-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(139, 105, 20, 0.28);
  background: rgba(250, 246, 238, 0.94);
  color: #3d2b1f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 750;
}

.cipher-legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e8dfd0;
  box-shadow: inset 0 0 0 1px rgba(139, 105, 20, 0.35);
}

.cipher-legend-item.is-cipher {
  background: rgba(196, 92, 62, 0.1);
  border-color: rgba(196, 92, 62, 0.32);
}

.cipher-legend-item.is-cipher i {
  background: #c45c3e;
}

.cipher-dial {
  /* Size container so letter radii track the actual dial, not fixed px. */
  position: relative;
  container-type: size;
  container-name: cipher-dial;
  width: min(100%, 280px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 16px 28px rgba(61, 43, 31, 0.22);
}

.cipher-dial-face {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 3px rgba(212, 175, 55, 0.45);
}

.cipher-marker {
  position: absolute;
  left: 50%;
  top: 2px;
  z-index: 5;
  width: 0;
  height: 0;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid #6b4f1d;
  filter: drop-shadow(0 1px 0 rgba(250, 246, 238, 0.85));
}

.cipher-sight {
  position: absolute;
  left: 50%;
  top: 14px;
  z-index: 1;
  width: 2px;
  height: calc(50% - 14px);
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(107, 79, 29, 0.72), rgba(107, 79, 29, 0.08));
  pointer-events: none;
}

.cipher-ring {
  position: absolute;
  inset: 4.64cqw;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
}

.inner-ring {
  inset: 17.14cqw;
  z-index: 3;
  background: transparent;
  transform: rotate(var(--shift-angle));
  transition: transform 160ms ease;
}

.cipher-ring .cipher-letter {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7.86cqw;
  height: 7.86cqw;
  margin: -3.93cqw;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.64cqw;
  font-weight: 800;
  color: #f6e6be;
  text-shadow: 0 1px 1px rgba(41, 28, 18, 0.9), 0 0 6px rgba(41, 28, 18, 0.45);
  opacity: 0.88;
  transition: opacity 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease;
  transform: rotate(var(--angle)) translateY(-42.14cqw);
}

.inner-ring .cipher-letter {
  width: 5.71cqw;
  height: 5.71cqw;
  margin: -2.855cqw;
  font-size: 3.21cqw;
  color: #faf6ee;
  background: #c45c3e;
  opacity: 0.62;
  transform: rotate(var(--angle)) translateY(-30.71cqw);
}

.cipher-ring .cipher-letter.is-marked {
  z-index: 3;
  opacity: 1;
  width: 8.57cqw;
  height: 8.57cqw;
  margin: -4.285cqw;
  font-size: 4.64cqw;
  box-shadow: 0 0 0 2px rgba(250, 246, 238, 0.95), 0 0 0 4px rgba(107, 79, 29, 0.55);
}

.outer-ring .cipher-letter.is-marked {
  background: #faf6ee;
  color: #3d2b1f;
  text-shadow: none;
}

.inner-ring .cipher-letter.is-marked {
  width: 6.79cqw;
  height: 6.79cqw;
  margin: -3.395cqw;
  font-size: 3.93cqw;
  background: #a8432a;
  box-shadow: 0 0 0 2px rgba(250, 246, 238, 0.95), 0 0 0 4px rgba(196, 92, 62, 0.85);
}

.cipher-hub {
  position: absolute;
  inset: 34.64cqw;
  z-index: 4;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d4af37 0%, #b8860b 42%, #8b6914 100%);
  color: #faf6ee;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 4px rgba(250, 246, 238, 0.88), 0 0 0 7px rgba(139, 105, 20, 0.35);
}

.cipher-hub-readout {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  pointer-events: none;
  text-align: center;
}

.cipher-hub-readout span,
.cipher-hub span {
  color: rgba(250, 246, 238, 0.82);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

.cipher-hub-readout strong,
.cipher-hub strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1;
}

.cipher-hub-rotate {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border: 1px solid rgba(250, 246, 238, 0.28);
  border-radius: 999px;
  background: rgba(32, 24, 18, 0.42);
  color: #faf6ee;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
}

.cipher-hub-rotate[data-direction="-1"] {
  left: 6px;
}

.cipher-hub-rotate[data-direction="1"] {
  right: 6px;
}

.cipher-hub-rotate:hover,
.cipher-hub-rotate:focus-visible {
  background: rgba(32, 24, 18, 0.62);
  outline: none;
}

.cipher-hub-rotate svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.cipher-hub-rotate[data-direction="1"] svg {
  transform: rotate(180deg);
}

.cipher-pair-chip {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 5px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(139, 105, 20, 0.28);
  background: rgba(250, 246, 238, 0.96);
  box-shadow: 0 8px 16px rgba(61, 43, 31, 0.1);
}

.cipher-pair-role {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(61, 43, 31, 0.58);
}

.cipher-pair-cipher,
.cipher-pair-plain {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.cipher-pair-cipher {
  color: #c45c3e;
}

.cipher-pair-plain {
  color: #3d2b1f;
}

.cipher-pair-arrow {
  color: rgba(61, 43, 31, 0.55);
  font-weight: 800;
}

.cipher-controls {
  grid-area: controls;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
}

.cipher-readout {
  display: grid;
  gap: 8px;
  width: min(100%, 420px);
  border: 1px solid rgba(250, 246, 238, 0.12);
  border-radius: 12px;
  background: rgba(18, 16, 14, 0.78);
  padding: 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.cipher-readout .cipher-answer-reveal {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  color: #e8c48a;
  text-align: center;
}

.cipher-answer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  width: min(100%, 220px);
  margin: 0 auto;
}

.cipher-answer-input {
  height: 36px;
  border: 1px solid rgba(250, 246, 238, 0.16);
  border-radius: 8px;
  background: rgba(10, 10, 10, 0.82);
  color: #f3e6c8;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cipher-answer-input::placeholder {
  color: rgba(243, 230, 200, 0.42);
}

.cipher-answer-submit {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(250, 246, 238, 0.18);
  border-radius: 8px;
  background: rgba(32, 24, 18, 0.88);
  color: #f3e6c8;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.cipher-answer-submit:hover,
.cipher-answer-submit:focus-visible {
  background: rgba(52, 38, 28, 0.96);
  outline: none;
}

.cipher-answer-submit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.cipher-keyboard {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0 auto;
}

.cipher-keyboard-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.cipher-keyboard-row.is-qwerty-mid {
  padding-inline: 4%;
}

.cipher-keyboard-row.is-qwerty-bottom {
  padding-inline: 8%;
}

.cipher-keyboard-row.is-compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 4px;
  width: 100%;
  min-height: 48px;
  padding-inline: 0;
}

.cipher-key {
  flex: 1 1 0;
  min-width: 0;
  min-height: 28px;
  border: 1px solid rgba(250, 246, 238, 0.12);
  border-radius: 6px;
  background: rgba(28, 24, 20, 0.92);
  color: #f0e2c4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.cipher-keyboard-row.is-compact .cipher-key {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: clamp(22px, 7%, 32px);
  height: clamp(22px, 7%, 32px);
  min-width: 22px;
  min-height: 22px;
  border-radius: 6px;
  font-size: clamp(10px, 2.4cqw, 13px);
  line-height: 1;
}

.cipher-key:hover,
.cipher-key:focus-visible {
  background: rgba(58, 46, 34, 0.96);
  outline: none;
}

.cipher-key.is-wide {
  flex: 1.45 1 0;
  letter-spacing: 0.04em;
}

.cipher-keyboard-row.is-compact .cipher-key.is-wide {
  flex: 0 0 auto;
  width: clamp(32px, 11%, 48px);
  min-width: 32px;
  padding-inline: 6px;
}

.gameplay-mini-modal.is-in-frame .cipher-scene {
  align-items: stretch;
  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.1fr);
  grid-template-areas:
    "note dial"
    "controls dial";
  row-gap: 8px;
  column-gap: 12px;
}

.gameplay-mini-modal.is-in-frame .cipher-note-panel {
  margin-top: 0;
  place-items: start;
  align-content: start;
  justify-items: start;
  min-height: 0;
  overflow: hidden;
}

.gameplay-mini-modal.is-in-frame .cipher-note {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-width: 120px;
  min-height: 90px;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 4 / 3;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left top;
}

.gameplay-mini-modal.is-in-frame .cipher-dial-wrap {
  grid-area: dial;
  margin-top: -10px;
  align-self: center;
}

.gameplay-mini-modal.is-in-frame .cipher-controls {
  justify-items: stretch;
  align-self: end;
}

.gameplay-mini-modal.is-in-frame .cipher-readout {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
}

.gameplay-mini-modal.is-in-frame .cipher-answer-row {
  width: min(100%, 260px);
  margin-inline: 0;
}

.gameplay-mini-modal.is-in-frame .cipher-keyboard {
  width: 100%;
}

.gameplay-mini-modal.is-in-frame .cipher-keyboard-row.is-compact {
  min-height: 54px;
  gap: 4px;
}

.gameplay-mini-modal.is-in-frame .cipher-key {
  min-height: 32px;
  font-size: 12px;
}

.gameplay-mini-modal.is-in-frame .cipher-keyboard-row.is-compact .cipher-key {
  width: clamp(24px, 7.5%, 34px);
  height: clamp(24px, 7.5%, 34px);
  min-width: 24px;
  min-height: 24px;
  font-size: clamp(11px, 2.5cqw, 14px);
}

.gameplay-mini-modal.is-in-frame .cipher-keyboard-row.is-compact .cipher-key.is-wide {
  width: clamp(36px, 12%, 52px);
  min-width: 36px;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .panel-body:has(.cipher-preview) {
  align-content: stretch;
  place-items: stretch;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .mini-preview-surface.cipher-preview {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  padding: 10px 10px 4px;
  align-content: stretch;
  overflow: hidden;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-scene {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "note"
    "dial"
    "controls";
  gap: 6px;
  justify-items: center;
  align-items: stretch;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-note-panel,
.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-dial-wrap,
.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-controls {
  width: 100%;
  margin-top: 0;
  position: relative;
  z-index: 1;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-note-panel {
  z-index: 2;
  align-self: start;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-note {
  width: min(100%, 300px);
  min-height: 0;
  aspect-ratio: 4 / 3;
  max-height: 180px;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-dial-wrap {
  min-height: 0;
  align-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  transform: translateY(-3%);
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-dial {
  width: min(100%, 280px);
  max-width: min(280px, 100%);
  max-height: 100%;
  aspect-ratio: 1;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-controls {
  z-index: 3;
  align-self: end;
  margin-top: auto;
  margin-bottom: 17%;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-readout {
  width: min(100%, 340px);
  padding: 8px 10px;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-answer-row {
  width: min(100%, 236px);
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-keyboard {
  width: 100%;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .cipher-key {
  min-height: 30px;
  font-size: 11px;
}

.cipher-preview.is-solved .cipher-dial {
  box-shadow:
    0 16px 28px rgba(61, 43, 31, 0.22),
    0 0 0 2px rgba(212, 175, 55, 0.45),
    0 0 28px rgba(212, 175, 55, 0.35);
}

.cipher-preview.is-solved .cipher-hub {
  background: radial-gradient(circle at 35% 30%, #e2c35a 0%, #c79a24 42%, #8f7014 100%);
  box-shadow:
    0 0 0 4px rgba(250, 246, 238, 0.92),
    0 0 0 7px rgba(168, 122, 48, 0.45),
    0 0 18px rgba(212, 175, 55, 0.4);
}

.cipher-preview.is-solved .cipher-hub-readout span {
  color: rgba(255, 248, 230, 0.95);
}

.cipher-preview.is-solved .cipher-hub-rotate,
.cipher-preview.is-solved .cipher-answer-input,
.cipher-preview.is-solved .cipher-answer-submit,
.cipher-preview.is-solved .cipher-key {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.cipher-preview.is-solved .cipher-answer-input {
  border-color: rgba(212, 175, 55, 0.35);
  color: #e8c48a;
}

.cipher-preview.is-solved .cipher-answer-submit {
  border-color: rgba(212, 175, 55, 0.4);
  color: #e8c48a;
}

.cipher-preview.is-solved .cipher-keyboard {
  opacity: 0.55;
}

.dial-button {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  display: grid;
  place-items: center;
}

.dial-button:hover {
  color: var(--accent-dark);
  border-color: var(--accent);
}

.dial-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.safe-preview {
  max-width: 520px;
}

.safe-door {
  width: min(100%, 280px);
  margin: 0 auto;
  aspect-ratio: 2 / 3;
  min-height: 0;
  height: auto;
  position: relative;
  border-radius: 8px;
  border: 1px solid #56483b;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: inset 0 0 0 999px rgba(32, 35, 38, 0.18);
}

.safe-door::before {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 8px;
}

.safe-preview.is-solved .safe-door {
  box-shadow: inset 0 0 0 999px rgba(88, 123, 70, 0.32);
}

.safe-preview.is-failed .safe-door {
  box-shadow: inset 0 0 0 999px rgba(139, 63, 83, 0.36);
}

.safe-screen {
  position: absolute;
  left: 48%;
  top: 73%;
  width: 38%;
  height: 15%;
  right: auto;
  bottom: auto;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 14, 0.55);
  color: #9ef0cc;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(14px, 4.2vw, 26px);
  letter-spacing: 0.08em;
  text-align: center;
}

.safe-preview.is-failed .safe-screen {
  color: #ffb9c8;
}

.safe-preview.is-wrong .safe-screen {
  color: #ff6f78;
  box-shadow: 0 0 18px rgba(255, 111, 120, 0.24), inset 0 0 16px rgba(255, 111, 120, 0.1);
}

.safe-keypad {
  max-width: 360px;
  margin: 0 auto;
}

.safe-keypad-image {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: none;
}

.safe-keyspot {
  position: absolute;
  transform: translate(-50%, -50%);
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  background-image: none;
  color: transparent;
  font-size: 1px;
  font-weight: 850;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
}

.safe-keyspot span {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.safe-keyspot:hover,
.safe-keyspot:focus-visible {
  border: 0;
  background: transparent;
  background-color: transparent;
  color: transparent;
  outline: none;
  box-shadow: none;
}

.safe-keyspot:disabled {
  cursor: not-allowed;
  color: transparent;
  background: transparent;
  background-color: transparent;
  border: 0;
  opacity: 1;
}

.art-grid {
  padding: 10px;
  border-radius: 8px;
  background: #d9c5a7;
  box-shadow: inset 0 0 0 5px rgba(255, 253, 248, 0.35);
}

.pattern-frame {
  border: 0px solid var(--line);
  border-radius: 8px;
  min-height: 98px;
  padding: 12px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: end;
}

.pattern-target-line {
  gap: 6px;
}

.mini-target-line .pattern-target-tile {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 6px;
  background-size: 200% 200%;
  background-repeat: no-repeat;
  background-color: #1d1712;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.45);
}

.art-tile {
  min-height: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.86), rgba(238, 227, 214, 0.92)),
    radial-gradient(circle at 20% 18%, rgba(182, 109, 58, 0.18), transparent 40%);
  box-shadow: inset 0 0 0 3px rgba(255, 253, 248, 0.52);
}

.pattern-grid .art-tile {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-color: #1d1712;
}

.tile-glyph,
.piece-glyph {
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
}

.sun-glyph {
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 10px rgba(182, 109, 58, 0.22);
}

.moon-glyph {
  border-radius: 50%;
  background: var(--teal);
}

.moon-glyph::after {
  content: "";
  position: absolute;
  inset: 0 0 0 17px;
  border-radius: 50%;
  background: #fffefb;
}

.key-glyph::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  width: 21px;
  height: 21px;
  border: 7px solid var(--wine);
  border-radius: 50%;
}

.key-glyph::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 25px;
  width: 27px;
  height: 8px;
  background: var(--wine);
  box-shadow: 14px 0 0 -3px var(--wine), 22px 0 0 -3px var(--wine);
}

.door-glyph {
  border-radius: 4px 4px 2px 2px;
  background: var(--charcoal);
  box-shadow: inset -10px 0 0 rgba(255, 253, 248, 0.12);
}

.door-glyph::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 26px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.default-glyph {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: #fffdf8;
  font-style: normal;
  font-weight: 800;
}

.assembly-bench {
  min-height: 100px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  padding: 18px;
  display: grid;
  align-items: end;
  box-shadow: inset 0 0 0 999px rgba(39, 37, 35, 0.34);
}

.assembly-slots {
  justify-content: center;
}

.assembly-slot {
  width: 102px;
  height: 102px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  align-self: center;
  padding: 0;
  border: 2px dashed rgba(255, 253, 248, 0.72);
  background: rgba(255, 253, 248, 0.14);
  color: #fffdf8;
  display: grid;
  place-items: center;
  gap: 0;
  font: inherit;
  cursor: copy;
  touch-action: none;
  user-select: none;
  overflow: hidden;
}

.assembly-slot.is-filled {
  border-style: solid;
  background: transparent; /*rgba(255, 253, 248, 0.88);*/
  color: var(--ink);
  cursor: grab;
  padding: 0;
}

.assembly-slot.is-drop-hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(182, 109, 58, 0.22);
}

.assembly-slot em,
.assembly-piece span {
  font-style: normal;
  text-transform: capitalize;
  font-size: 12px;
  max-width: 110px;
  overflow-wrap: anywhere;
  text-align: center;
  color: white;
}

.assembly-slot .item-icon,
.assembly-piece .item-icon {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 8px;
  background: transparent;
}

.assembly-slot .item-icon img,
.assembly-piece .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.assembly-piece {
  border: 0;
  border-radius: 8px;
  background: transparent; /*var(--panel);*/
  color: var(--ink);
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  align-self: center;
  padding: 0;
  display: grid;
  place-items: center;
  gap: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

.assembly-piece.is-used {
  background: transparent; #edf5f0;
  border-color: rgba(88, 123, 70, 0.42);
  box-shadow: inset 0 0 0 2px rgba(88, 123, 70, 0.12);
}

.assembly-piece:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.assembly-piece:active,
.assembly-slot.is-filled:active {
  cursor: grabbing;
}

.assembly-inventory-empty {
  min-height: 86px;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.gameplay-mini-modal.is-in-frame .panel-body:has(.assembly-preview) {
  container-type: size;
  display: grid;
  place-items: stretch;
  align-content: stretch;
  padding: clamp(8px, 1.6vw, 16px);
}

.gameplay-mini-modal.is-in-frame .mini-preview-surface.assembly-preview {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1.84fr) minmax(0, 0.95fr);
  gap: clamp(8px, 1.4cqh, 12px);
  align-content: stretch;
  padding: clamp(6px, 1.2cqw, 12px);
  overflow: hidden;
  background: transparent;
}

.gameplay-mini-modal.is-in-frame .assembly-bench {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: clamp(6px, 1.2cqw, 10px);
  overflow: hidden;
}

.gameplay-mini-modal.is-in-frame .assembly-slots {
  align-items: center;
  gap: clamp(8px, 1.4cqw, 12px);
}

.gameplay-mini-modal.is-in-frame .assembly-slot {
  --assembly-slot-size: min(102px, 27cqmin);
  width: var(--assembly-slot-size);
  height: var(--assembly-slot-size);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  padding: 0;
}

.gameplay-mini-modal.is-in-frame .assembly-pieces {
  min-height: 0;
  height: 100%;
  max-height: none;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: clamp(8px, 1.4cqw, 12px);
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 24, 18, 0.72), rgba(12, 14, 10, 0.88)),
    repeating-linear-gradient(90deg, rgba(255, 253, 248, 0.04) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(180deg, rgba(255, 253, 248, 0.03) 0 1px, transparent 1px 22px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gameplay-mini-modal.is-in-frame .assembly-pieces::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.gameplay-mini-modal.is-in-frame .assembly-piece {
  --assembly-piece-size: min(96px, 24cqmin);
  width: var(--assembly-piece-size);
  height: var(--assembly-piece-size);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  padding: 0;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .mini-preview-surface.assembly-preview {
  grid-template-rows: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(6px, 1.2cqh, 10px);
  padding: clamp(4px, 1cqw, 8px);
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .assembly-bench {
  padding: clamp(4px, 1.2cqw, 8px);
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .assembly-slot {
  --assembly-slot-size: min(96px, 27cqmin);
  width: var(--assembly-slot-size);
  height: var(--assembly-slot-size);
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .assembly-piece {
  --assembly-piece-size: min(84px, 24cqmin);
  width: var(--assembly-piece-size);
  height: var(--assembly-piece-size);
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .assembly-pieces {
  gap: 6px;
}

.object-assembly-answer-list {
  display: grid;
  gap: 8px;
}

.object-assembly-answer-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.object-assembly-step {
  color: var(--soft);
  font-size: 12px;
  font-weight: 760;
}

.lens-glyph {
  border: 6px solid var(--teal);
  border-radius: 50%;
  background: rgba(35, 120, 117, 0.15);
}

.ring-glyph {
  border: 8px solid var(--accent);
  border-radius: 50%;
}

.handle-glyph::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 4px;
  width: 10px;
  height: 48px;
  border-radius: 999px;
  background: var(--wine);
  transform: rotate(38deg);
}

.default-piece {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--teal);
  color: #fffdf8;
  font-style: normal;
  font-weight: 800;
}

.audio-console {
  min-height: 168px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  box-shadow: inset 0 0 0 999px rgba(32, 35, 38, 0.48);
}

.waveform-bars {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.waveform-bars span {
  width: 100%;
  max-width: 14px;
  height: var(--h);
  border-radius: 999px;
  background: #9ef0cc;
  box-shadow: 0 0 12px rgba(158, 240, 204, 0.35);
}

.audio-play-button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 248, 0.72);
  background: rgba(255, 253, 248, 0.16);
  color: #fffdf8;
  display: grid;
  place-items: center;
}

.audio-play-button svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.audio-preview-player {
  width: 100%;
  min-height: 38px;
}

.graphic-transcript {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.transcript-gap,
.word-chip {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}

.transcript-gap {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
}

.transcript-gap span {
  color: var(--muted);
  font-size: 12px;
}

.transcript-gap strong {
  text-transform: capitalize;
}

.transcript-gap.is-filled {
  background: #e3eddf;
  border-color: rgba(88, 123, 70, 0.5);
}

.word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.word-chip {
  min-height: 36px;
  padding: 7px 11px;
  text-transform: capitalize;
}

.word-chip:hover,
.transcript-gap:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.audio-preview-player.is-autoplay {
  display: none;
}

.gameplay-mini-modal.is-in-frame .audio-preview {
  gap: 14px;
}

.gameplay-mini-modal.is-in-frame .audio-console {
  min-height: 132px;
  border-color: rgba(255, 253, 248, 0.12);
  background-color: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.54);
}

.gameplay-mini-modal.is-in-frame .audio-play-button.is-restart {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 253, 248, 0.54);
}

.gameplay-mini-modal.is-in-frame .graphic-transcript {
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
}

.gameplay-mini-modal.is-in-frame .transcript-gap {
  min-height: 62px;
  background: transparent;
  border-color: rgba(255, 253, 248, 0.28);
  color: #fffdf8;
}

.gameplay-mini-modal.is-in-frame .transcript-gap.is-filled {
  background: transparent;
  border-color: rgba(158, 240, 204, 0.62);
}

.gameplay-mini-modal.is-in-frame .transcript-gap strong {
  color: #fffdf8;
  font-weight: 700;
  text-transform: none;
}

.gameplay-mini-modal.is-in-frame .word-bank {
  justify-content: center;
}

.gameplay-mini-modal.is-in-frame .word-chip {
  background: transparent;
  border-color: rgba(255, 253, 248, 0.26);
  color: #fffdf8;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  text-transform: none;
}

.gameplay-mini-modal.is-in-frame .word-chip:hover,
.gameplay-mini-modal.is-in-frame .word-chip:focus-visible {
  border-color: rgba(158, 240, 204, 0.76);
  color: #9ef0cc;
}

.logic-preview {
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto auto;
  align-content: start;
  justify-items: stretch;
}

.logic-preview .switchboard,
.logic-preview .graphic-switches,
.logic-preview .logic-hint {
  justify-self: center;
}

.logic-preview .graphic-switches {
  width: min(100%, 448px);
}

.switchboard {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  align-self: center;
  justify-self: center;
}

.logic-main-bulb {
  position: absolute;
  left: 50%;
  top: calc(14.5% - 5px);
  width: 21.5%;
  max-width: 148px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  transition: filter 0.28s ease, opacity 0.28s ease;
}

.logic-main-bulb.is-off {
  filter: brightness(0.28) saturate(0.35) contrast(0.95);
  opacity: 0.92;
}

.logic-main-bulb.is-on {
  filter:
    brightness(1.06)
    saturate(1.12)
    drop-shadow(0 0 10px rgba(190, 255, 90, 0.55))
    drop-shadow(0 0 22px rgba(255, 210, 60, 0.32));
  opacity: 1;
}

.gameplay-mini-modal.is-in-frame .panel-body:has(.logic-preview) {
  container-type: size;
  display: grid;
  place-items: center;
  align-content: center;
}

.gameplay-mini-modal.is-in-frame .mini-preview-surface.logic-preview {
  width: min(100%, 760px);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: clamp(8px, 1.6vw, 12px);
  align-content: center;
  justify-items: center;
  padding: clamp(10px, 2vw, 18px);
  overflow: hidden;
  background: transparent;
}

.gameplay-mini-modal.is-in-frame .logic-preview .switchboard {
  width: min(100%, calc((100cqh - 170px) * 4 / 3), 720px);
  max-width: 100%;
  max-height: calc(100cqh - 170px);
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}

.gameplay-mini-modal.is-in-frame .logic-preview .graphic-switches {
  width: min(100%, 448px);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.gameplay-mini-modal.is-in-frame .logic-preview .logic-switch {
  height: clamp(72px, 17cqh, 124px);
}

.logic-hint {
  margin: 0;
  max-width: 640px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.gameplay-mini-modal.is-in-frame .logic-hint {
  color: rgba(255, 253, 248, 0.78);
  font-size: 14px;
}

.circuit-lines {
  position: absolute;
  inset: 28px;
}

.circuit-lines span {
  position: absolute;
  left: 6%;
  right: 24%;
  top: var(--top);
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.32);
}

.circuit-lines span::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.24);
}

.circuit-lines span.is-on {
  background: #9ef0cc;
  box-shadow: 0 0 14px rgba(158, 240, 204, 0.45);
}

.circuit-lines span.is-on::after {
  background: #9ef0cc;
}

.power-core {
  position: absolute;
  right: 36px;
  top: 50%;
  width: 82px;
  height: 82px;
  transform: translateY(-50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 253, 248, 0.46);
  background: rgba(255, 253, 248, 0.1);
  border: 2px solid rgba(255, 253, 248, 0.28);
}

.power-core.is-on {
  color: #fffdf8;
  background: var(--leaf);
  box-shadow: 0 0 28px rgba(88, 123, 70, 0.58);
}

.power-core svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.graphic-switches {
  width: 100%;
  max-width: 448px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #1a1714 0%, #0a0908 100%);
  box-shadow: inset 0 1px 0 rgba(255, 253, 248, 0.06);
  justify-self: stretch;
}

.circuit-match-board {
  position: relative;
  min-height: 340px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 999px rgba(24, 31, 33, 0.5);
}

.circuit-lines-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.circuit-lines-svg path {
  fill: none;
  stroke: var(--line-color, rgba(255, 253, 248, 0.38));
  stroke-width: 1.7;
  stroke-linecap: round;
}

.circuit-lines-svg path.is-correct {
  filter: drop-shadow(0 0 5px rgba(255, 253, 248, 0.46));
}

.circuit-lines-svg path.is-wrong {
  opacity: 0.5;
}

.node-column {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
}

.left-nodes {
  left: 0;
}

.right-nodes {
  right: 0;
}

.circuit-node {
  position: absolute;
  top: var(--node-y);
  transform: translateY(-50%);
  border: 1px solid rgba(255, 253, 248, 0.38);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.12);
  color: #fffdf8;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0;
  backdrop-filter: blur(3px);
}

.left-nodes .circuit-node {
  left: 18px;
}

.right-nodes .circuit-node {
  right: 18px;
}

.circuit-node span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 253, 248, 0.4), rgba(255, 253, 248, 0.08) 38%, rgba(16, 18, 18, 0.88) 72%),
    #151a1b;
  box-shadow: inset 0 0 0 4px rgba(255, 253, 248, 0.14), 0 0 16px rgba(255, 253, 248, 0.1);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.circuit-node.is-revealed span {
  background: var(--node-color);
  box-shadow: inset 0 0 0 4px rgba(255, 253, 248, 0.22), 0 0 16px rgba(255, 253, 248, 0.16);
}

.circuit-node:hover,
.circuit-node.is-selected {
  border-color: #9ef0cc;
  background: rgba(158, 240, 204, 0.16);
}

.circuit-node.is-connected:not(.is-selected) {
  border-color: rgba(158, 240, 204, 0.55);
}

.circuit-node.is-failed-reveal {
  border-color: rgba(199, 74, 74, 0.9);
  background: rgba(199, 74, 74, 0.16);
}

.circuit-node.is-failed-reveal span {
  transform: scale(1.08);
  box-shadow: inset 0 0 0 4px rgba(255, 253, 248, 0.22), 0 0 22px rgba(199, 74, 74, 0.52);
}

.circuit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 253, 248, 0.36);
  background: rgba(255, 253, 248, 0.12);
  color: rgba(255, 253, 248, 0.48);
  display: grid;
  place-items: center;
}

.circuit-core.is-on {
  background-color: var(--leaf);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fffdf8;
  border-color: rgba(158, 240, 204, 0.72);
  box-shadow: 0 0 32px rgba(158, 240, 204, 0.62);
}

.circuit-core svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.simple-memo-preview {
  position: relative;
  display: grid;
  place-items: stretch;
  min-height: 340px;
}

.simple-memo-board {
  --memo-cols: 4;
  --memo-rows: 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--memo-cols), auto);
  grid-template-rows: repeat(var(--memo-rows), minmax(0, 1fr));
  align-content: stretch;
  justify-content: center;
  align-items: center;
  justify-items: center;
  gap: clamp(6px, 1.4vw, 10px);
  padding: clamp(22px, 4.2vw, 40px) clamp(26px, 5vw, 48px);
  box-sizing: border-box;
  min-height: 340px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.simple-memo-card {
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: stretch;
  perspective: 800px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.simple-memo-card:disabled {
  cursor: default;
}

.simple-memo-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 420ms ease;
  border-radius: 10px;
}

.simple-memo-card.is-flipped .simple-memo-card-inner,
.simple-memo-card.is-matched .simple-memo-card-inner {
  transform: rotateY(180deg);
}

.simple-memo-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 10px;
  background-color: #151210;
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 253, 248, 0.28);
}

.simple-memo-face.is-front {
  transform: rotateY(180deg);
  background-repeat: no-repeat;
  background-size: calc(var(--memo-frame-count, 8) * 100%) 100%;
  background-position: calc(var(--memo-frame, 0) * 100% / (var(--memo-frame-count, 8) - 1)) 50%;
}

.simple-memo-card.is-matched .simple-memo-face.is-front {
  box-shadow: 0 0 0 2px rgba(158, 240, 204, 0.75), 0 8px 18px rgba(0, 0, 0, 0.35);
}

.simple-memo-success {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.construction-preview {
  position: relative;
  display: grid;
  place-items: stretch;
  min-height: 360px;
  min-width: 0;
}

.construction-bench {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #3d2a18;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.construction-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 620;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.construction-part {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  border: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  z-index: 2;
}

.construction-part:disabled {
  cursor: default;
}

.construction-part.is-dragging {
  z-index: 6;
  cursor: grabbing;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
}

.construction-part.has-sheet {
  overflow: hidden;
}

.construction-part-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.construction-pin-dot {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid #e31b23;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.15);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}

.construction-pin-dot.is-hot {
  background: #e31b23;
  box-shadow: 0 0 0 12px rgba(227, 27, 35, 0.28);
}

.construction-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(20, 14, 8, 0.78);
  color: #f4e6c8;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

.construction-banner.is-hint {
  font-weight: 600;
  opacity: 0.92;
}

.construction-preview-shell {
  display: grid;
  gap: 10px;
}

.construction-dev-reset {
  justify-self: start;
  width: max-content;
}

.construction-solution-guide {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.construction-bench.is-solution {
  min-height: 220px;
  background:
    linear-gradient(180deg, rgba(255, 248, 235, 0.08), transparent 42%),
    #2a1d12;
}

.construction-part.is-static {
  cursor: default;
  pointer-events: none;
}

.construction-banner b {
  color: #e8c56a;
}

.construction-memorize-photo {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 7;
}

.construction-preview.is-solved {
  place-items: stretch;
  min-height: 360px;
}

.construction-success {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 280px;
  background-color: #3d2a18;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 9;
}

.jigsaw-board {
  position: relative;
  min-height: 460px;
  --jigsaw-grid-width: calc(var(--jigsaw-cols) * var(--piece-size));
  --jigsaw-grid-height: calc(var(--jigsaw-rows) * var(--piece-size));
  --jigsaw-bg-width: var(--jigsaw-grid-width);
  --jigsaw-bg-height: var(--jigsaw-grid-height);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 18%, rgba(182, 109, 58, 0.22), transparent 26%),
    linear-gradient(135deg, #191817, #070707);
  padding: 18px;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.58);
}

.jigsaw-preview {
  position: relative;
}

.jigsaw-picture-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-width: min(100%, var(--jigsaw-grid-width));
  min-height: min(100%, var(--jigsaw-grid-height));
  background: #070707;
  border: 1px solid rgba(255, 253, 248, 0.18);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.jigsaw-picture-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--jigsaw-bg-width);
  height: var(--jigsaw-bg-height);
  transform: translate(-50%, -50%);
  background-image: var(--jigsaw-image);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  pointer-events: none;
}

.jigsaw-picture-stage::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 253, 248, 0.45) 0 6%, rgba(209, 170, 98, 0.28) 11%, transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(158, 240, 204, 0.22), transparent 44%);
  opacity: 0;
  transform: scale(0.42);
  pointer-events: none;
}

.jigsaw-preview.is-solved .jigsaw-picture-stage::after {
  animation: jigsawBoardWave 2.75s ease-out both;
}

.jigsaw-slots {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: var(--jigsaw-grid-width);
  height: var(--jigsaw-grid-height);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(var(--jigsaw-cols), var(--piece-size));
  grid-template-rows: repeat(var(--jigsaw-rows), var(--piece-size));
  justify-content: center;
  align-content: center;
  gap: 0;
}

.jigsaw-slot {
  position: relative;
  width: var(--piece-size);
  height: var(--piece-size);
  min-width: var(--piece-size);
  min-height: var(--piece-size);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 253, 248, 0.16);
  border-radius: 0;
  background: #020202;
  color: var(--muted);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 0;
  text-transform: capitalize;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}

.jigsaw-slot::after {
  content: "";
  position: absolute;
  inset: -2px;
  opacity: 0;
  pointer-events: none;
}

.jigsaw-slot::after {
  inset: 1px;
  z-index: 3;
  border: 1px solid rgba(255, 239, 183, 0.88);
  box-shadow:
    inset 0 0 14px rgba(255, 232, 168, 0.48),
    0 0 18px rgba(209, 170, 98, 0.44);
}

.jigsaw-preview.is-solved .jigsaw-slot.is-correct {
  animation: jigsawPiecePulse 2.55s ease-out both;
  animation-delay: calc(var(--piece-index, 0) * 42ms);
}

.jigsaw-preview.is-solved .jigsaw-slot.is-correct::after {
  opacity: 1;
  animation: jigsawSparkSettle 2.65s ease-out both;
  animation-delay: calc(var(--piece-index, 0) * 42ms);
}

.jigsaw-slot em,
.jigsaw-piece-label {
  font-style: normal;
  font-size: 12px;
  text-transform: capitalize;
}

.jigsaw-slot.is-filled {
  border-style: solid;
  background: #020202;
  color: var(--ink);
  cursor: grab;
  touch-action: none;
}

.jigsaw-slot.is-correct {
  border-color: rgba(88, 123, 70, 0.62);
  background: #020202;
}

.jigsaw-slot.is-wrong {
  border-color: rgba(185, 68, 63, 0.58);
}

.jigsaw-loose-pieces {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.jigsaw-piece {
  position: absolute;
  left: var(--piece-x);
  top: var(--piece-y);
  width: var(--piece-size);
  height: var(--piece-size);
  transform: translate(-50%, -50%);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #020202;
  color: var(--ink);
  overflow: hidden;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 0;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  box-shadow: 0 8px 16px rgba(32, 35, 38, 0.1);
}

.jigsaw-piece:hover,
.jigsaw-piece.is-selected,
.jigsaw-slot.is-selected,
.jigsaw-slot:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.jigsaw-slot.is-selected {
  box-shadow: 0 0 0 3px rgba(182, 109, 58, 0.18);
}

.jigsaw-piece:active {
  cursor: grabbing;
}

.jigsaw-piece.is-dragging {
  opacity: 0 !important;
  pointer-events: none !important;
}

.jigsaw-slot.is-dragging {
  opacity: 1 !important;
  pointer-events: none !important;
  cursor: grabbing;
}

.jigsaw-slot.is-dragging .jigsaw-piece-image {
  visibility: hidden;
}

.jigsaw-slot.is-drop-hover {
  border-color: rgba(255, 239, 183, 0.92);
  box-shadow:
    inset 0 0 14px rgba(255, 232, 168, 0.42),
    0 0 16px rgba(209, 170, 98, 0.4);
}

.jigsaw-drag-ghost {
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: #020202;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  opacity: 0.96;
  overflow: hidden;
}

.jigsaw-drag-ghost .jigsaw-piece-image {
  inset: 0;
}

.jigsaw-piece-image {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-color: rgba(32, 35, 38, 0.12);
}

.jigsaw-piece-label {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 5px;
  background: rgba(32, 35, 38, 0.68);
  color: #fffdf8;
  padding: 2px 3px;
  line-height: 1.1;
  text-align: center;
}

.jigsaw-actions {
  display: flex;
  justify-content: flex-end;
}

.jigsaw-piece-assets {
  grid-template-columns: 78px minmax(0, 1fr);
}

@keyframes jigsawSparkSettle {
  0% {
    opacity: 0;
  }

  18%,
  62% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes jigsawPiecePulse {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }

  18% {
    filter: brightness(1.22) saturate(1.08);
    transform: scale(1.018);
  }

  68% {
    filter: brightness(1.12) saturate(1.04);
  }

  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

@keyframes jigsawBoardWave {
  0% {
    opacity: 0;
    transform: scale(0.42);
  }

  22% {
    opacity: 0.85;
  }

  72% {
    opacity: 0.24;
    transform: scale(1.18);
  }

  100% {
    opacity: 0;
    transform: scale(1.34);
  }
}

.mini-asset-jigsaw-thumb {
  display: grid;
  place-items: center;
  color: var(--wine);
}

.mini-asset-jigsaw-thumb svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.jigsaw-piece-asset-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.jigsaw-piece-asset-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 8px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.jigsaw-piece-asset-row img {
  width: 54px;
  height: 54px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.jigsaw-piece-asset-row strong,
.jigsaw-piece-asset-row span,
.jigsaw-piece-asset-row em {
  display: block;
}

.jigsaw-piece-asset-row span,
.jigsaw-piece-asset-row em {
  color: var(--muted);
  font-size: 12px;
}

.number-keylock-face {
  min-height: 320px;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--ck-muted, #d3d0cc) 28%, transparent);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 12px 12px 18px;
  overflow: hidden;
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--ck-app-bg, #000) 42%, transparent);
}

.keylock-shackle {
  position: absolute;
  top: 28px;
  width: 190px;
  height: 138px;
  border: 16px solid var(--ck-gold, #efc65c);
  border-bottom: 0;
  border-radius: 96px 96px 0 0;
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--ck-app-bg, #000) 18%, transparent);
  transition: transform 180ms ease;
}

.keylock-shackle.is-open {
  transform: translateY(-22px) rotate(-9deg);
}

.digit-wheels {
  position: relative;
  top: auto;
  z-index: 1;
  --digit-col: 38px;
  --digit-gap: 6px;
  --digit-pad: 14px;
  width: min(
    100%,
    calc(
      (var(--digit-count) * var(--digit-col))
      + ((var(--digit-count) - 1) * var(--digit-gap))
      + (2 * var(--digit-pad))
    )
  );
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--digit-count), minmax(0, var(--digit-col)));
  gap: var(--digit-gap);
  padding: var(--digit-pad);
  margin-bottom: 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ck-card-bg, #151517) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--ck-muted, #d3d0cc) 34%, transparent);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--ck-app-bg, #000) 42%, transparent);
  backdrop-filter: blur(6px);
  box-sizing: border-box;
}

.digit-wheel {
  display: grid;
  place-items: center;
  gap: 6px;
}

.digit-wheel strong {
  width: 100%;
  min-height: 59px;
  border: 1px solid color-mix(in srgb, var(--ck-gold, #efc65c) 28%, transparent);
  border-radius: 8px;
  background: var(--ck-settings-panel-bg, #050505);
  color: var(--ck-gold, #efc65c);
  display: grid;
  place-items: center;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--ck-gold, #efc65c) 14%, transparent);
}

.digit-arrow {
  width: 100%;
  min-height: 27px;
  border: 1px solid color-mix(in srgb, var(--ck-muted, #d3d0cc) 36%, transparent);
  border-radius: 8px;
  background: var(--ck-settings-button-bg, #1e1f20);
  color: var(--ck-settings-text, #fffdf8);
  display: grid;
  place-items: center;
}

.digit-arrow:hover {
  border-color: color-mix(in srgb, var(--ck-accent, #c92f2f) 82%, transparent);
  color: var(--ck-accent, #c92f2f);
}

.digit-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.digit-arrow.up svg {
  transform: rotate(90deg);
}

.digit-arrow.down svg {
  transform: rotate(-90deg);
}

.number-lock-adv-preview-shell {
  display: grid;
  gap: 10px;
}

.number-lock-adv-dev-reset {
  justify-self: start;
  width: max-content;
}

.digit-wheel.is-linked strong {
  border-color: color-mix(in srgb, var(--ck-accent, #c92f2f) 72%, transparent);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--ck-accent, #c92f2f) 22%, transparent);
}

.number-lock-adv-matrix {
  display: grid;
  gap: 4px;
  overflow-x: auto;
}

.number-lock-adv-matrix-row {
  display: grid;
  grid-template-columns: 52px repeat(auto-fit, minmax(28px, 1fr));
  gap: 4px;
  align-items: center;
}

.number-lock-adv-matrix-row span {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.number-lock-adv-matrix-row.is-head span,
.number-lock-adv-matrix-row [role="rowheader"] {
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  color: var(--muted);
  font-weight: 600;
}

.number-lock-adv-matrix-row .is-self {
  background: color-mix(in srgb, var(--ck-gold, #efc65c) 18%, transparent);
}

.number-lock-adv-matrix-row .is-linked-cell {
  background: color-mix(in srgb, var(--ck-accent, #c92f2f) 16%, transparent);
}

.number-lock-adv-turn-guide {
  display: grid;
  gap: 12px;
}

.number-lock-adv-turn-block {
  display: grid;
  gap: 6px;
}

.number-lock-adv-turn-presets {
  display: grid;
  gap: 8px;
}

.number-lock-adv-turn-preset {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.number-lock-adv-turn-preset.is-active {
  border-color: color-mix(in srgb, var(--ck-gold, #efc65c) 55%, var(--line));
  background: color-mix(in srgb, var(--ck-gold, #efc65c) 8%, transparent);
}

.number-lock-adv-turn-preset em {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
}

.number-lock-adv-turn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.number-lock-adv-turn-row span {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.number-lock-adv-turn-row span.is-up {
  border-color: color-mix(in srgb, var(--ck-gold, #efc65c) 45%, var(--line));
}

.number-lock-adv-turn-row span.is-down {
  border-color: color-mix(in srgb, var(--ck-accent, #c92f2f) 45%, var(--line));
}

.gear-machine {
  min-height: 330px;
  position: relative;
  border: 1px solid #5c5044;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 999px rgba(32, 35, 38, 0.46);
}

.gear-rail {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(420px, 72%);
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.24);
}

.gear-peg {
  position: absolute;
  left: var(--peg-x);
  top: 50%;
  width: calc(76px * var(--gear-scale, 0.9));
  height: calc(76px * var(--gear-scale, 0.9));
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 1px dashed rgba(255, 253, 248, 0.46);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.1);
  color: #fffdf8;
  display: block;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  overflow: visible;
}

.gear-peg.has-gear {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.gear-peg.has-gear:hover,
.gear-peg.has-gear:focus-visible {
  border-color: rgba(158, 240, 204, 0.55);
  background: rgba(255, 253, 248, 0.06);
}

.gear-peg em {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-style: normal;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.gear-peg:hover,
.gear-token:hover,
.gear-token.is-selected {
  border-color: #9ef0cc;
  color: #fffdf8;
}

.gear-peg.is-correct {
  border-style: solid;
  box-shadow: 0 0 24px rgba(158, 240, 204, 0.36);
}

.gear-peg.has-gear.is-correct {
  border-color: transparent;
  box-shadow: none;
}

.gear-peg.is-wrong {
  border-color: rgba(213, 106, 94, 0.72);
}

.gear-peg.has-gear.is-wrong {
  border-color: rgba(213, 106, 94, 0.45);
}

.peg-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #d9c5a7;
  box-shadow: inset 0 -3px 0 rgba(32, 35, 38, 0.25);
  z-index: 0;
  pointer-events: none;
}

.gear-peg .gear-wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%) rotate(var(--gear-phase, 0deg));
}

.gear-peg.has-gear .gear-wheel {
  z-index: calc(2 + var(--peg-index, 0));
}

.gear-wheel {
  position: relative;
  width: calc(72px * var(--gear-scale, 0.9));
  height: calc(72px * var(--gear-scale, 0.9));
  border-radius: 0;
  display: grid;
  place-items: center;
  background: transparent;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.32));
  transform: rotate(var(--gear-phase, 0deg));
  animation: none;
}

.gear-cog-preview.is-solved .gear-peg .gear-wheel.is-mesh {
  animation: gear-mesh-spin var(--gear-period, 1.4s) linear infinite;
}

.gear-wheel.is-sprite img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.gear-wheel b {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: var(--charcoal);
}

.gear-tray {
  min-height: 106px;
  /*border: 1px solid var(--line);*/
  border-radius: 8px;
  /*background: var(--panel-2);*/
  padding: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.gear-cog-advanced-preview .gear-cluster {
  position: absolute;
  inset: 0;
  transform: scale(var(--gear-board-scale, 1));
  transform-origin: center center;
}

.gear-cog-advanced-preview .gear-peg {
  top: var(--peg-y, 50%);
}

.gear-cog-advanced-preview .gear-peg.is-empty,
.gear-cog-advanced-preview .gear-peg.is-empty:hover,
.gear-cog-advanced-preview .gear-peg.is-empty:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.gear-cog-advanced-preview.show-ghosts .gear-peg.is-empty,
.gear-cog-advanced-preview.show-ghosts .gear-peg.is-empty:hover,
.gear-cog-advanced-preview.show-ghosts .gear-peg.is-empty:focus-visible {
  border: 1px dashed rgba(255, 253, 248, 0.46);
  background: rgba(255, 253, 248, 0.1);
}

.gear-cog-advanced-preview .gear-ghost,
.gear-advanced-solution .gear-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255, 253, 248, 0.32);
  border-radius: 50%;
  pointer-events: none;
}

.gear-advanced-solution {
  margin-top: 8px;
}

.gear-advanced-solution .gear-machine,
.gear-advanced-solution-board {
  min-height: 240px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 253, 248, 0.08), transparent 58%),
    #2a2622;
}

.gear-advanced-solution .gear-cluster {
  position: absolute;
  inset: 0;
  transform: scale(var(--gear-board-scale, 1));
  transform-origin: center center;
}

.gear-advanced-solution .gear-peg {
  top: var(--peg-y, 50%);
  pointer-events: none;
}

.gear-advanced-solution .gear-wheel.is-mesh {
  animation: gear-mesh-spin var(--gear-period, 1.4s) linear infinite;
}

.gear-cog-advanced-preview .gear-peg.is-blocked {
  border-color: rgba(213, 106, 94, 0.85);
  animation: gear-adv-block 280ms ease;
}

.gear-cog-advanced-preview.is-jammed .gear-cluster {
  animation: gear-adv-jam 720ms ease;
}

.gear-tray-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gear-cog-advanced-preview .gear-tray {
  flex: 1;
  min-height: 88px;
}

.gear-cog-advanced-preview .gear-token {
  overflow: visible;
  position: relative;
}

.gear-token-count {
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 253, 248, 0.82);
}

.gear-advanced-reset {
  flex: 0 0 auto;
  white-space: nowrap;
}

@keyframes gear-adv-block {
  0%, 100% { transform: translate(-50%, -50%); }
  30% { transform: translate(-58%, -50%); }
  60% { transform: translate(-42%, -50%); }
}

@keyframes gear-adv-jam {
  0%, 100% { transform: scale(var(--gear-board-scale, 1)) translateX(0); }
  20% { transform: scale(var(--gear-board-scale, 1)) translateX(-6px); }
  40% { transform: scale(var(--gear-board-scale, 1)) translateX(6px); }
  60% { transform: scale(var(--gear-board-scale, 1)) translateX(-4px); }
  80% { transform: scale(var(--gear-board-scale, 1)) translateX(3px); }
}

.gear-peg.is-fixed {
  cursor: default;
}

.gear-peg.is-fixed:hover,
.gear-peg.is-fixed:focus-visible {
  border-color: transparent;
  background: transparent;
}

.gear-token {
  width: 92px;
  /*height: 108px;*/
  box-sizing: border-box;
  /*padding: 8px 6px 6px;*/
  border: 1px solid var(--line-strong);
  border: none;
  border-radius: 8px;
  background: transparent;
  color: white;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 4px;
  overflow: hidden;
  cursor: grab;
}

.gear-token-icon {
  /*width: 72px;
  height: 72px;*/
  display: grid;
  place-items: center;
  overflow: hidden;
}

.gear-token .gear-wheel {
  width: calc(59px * var(--gear-scale, 0.9));
  height: calc(59px * var(--gear-scale, 0.9));
}

.gear-token-label {
  font-size: 12px;
  text-transform: capitalize;
  line-height: 1.1;
}

.gear-drive,
.gear-output {
  position: absolute;
  top: 28px;
  border: 1px solid rgba(255, 253, 248, 0.32);
  border-radius: 8px;
  padding: 8px 10px;
  color: #fffdf8;
  background: rgba(255, 253, 248, 0.1);
  font-size: 12px;
  text-transform: uppercase;
}

.gear-drive {
  left: 24px;
}

.gear-output {
  right: 24px;
}

.gear-output.is-on,
.gear-drive.is-on {
  background: var(--leaf);
  box-shadow: 0 0 18px rgba(88, 123, 70, 0.5);
}

@keyframes gear-mesh-spin {
  from {
    transform: translate(-50%, -50%) rotate(var(--gear-phase, 0deg));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--gear-phase, 0deg) + (360deg * var(--gear-dir, 1))));
  }
}

@keyframes gear-turn {
  to {
    transform: rotate(360deg);
  }
}

.painting-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.painting-frame {
  position: relative;
  min-height: 300px;
  border: 10px solid #6b4931;
  border-radius: 8px;
  background-color: #1a1410;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: 0 12px 22px rgba(32, 35, 38, 0.12);
}

.painting-frame.has-custom-art {
  box-shadow: 0 12px 22px rgba(32, 35, 38, 0.18);
}

.gameplay-mini-modal.is-in-frame .panel-body:has(.spot-difference-preview) {
  container-type: size;
  display: grid;
  place-items: stretch;
  align-content: stretch;
  overflow: hidden;
}

.gameplay-mini-modal.is-in-frame .spot-difference-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: #0b0a09;
}

.gameplay-mini-modal.is-in-frame .spot-difference-preview .painting-pair {
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

.gameplay-mini-modal.is-in-frame .spot-difference-preview .painting-frame {
  min-height: 0;
  width: 100%;
  height: 100%;
}

.painting-frame > span {
  position: absolute;
  left: 12px;
  bottom: 10px;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(32, 35, 38, 0.72);
  color: #fffdf8;
  font-size: 12px;
}

.painting-sky,
.painting-moon,
.painting-house,
.painting-tree,
.painting-signature,
.painting-book,
.painting-keyhole {
  position: absolute;
}

.painting-sky {
  inset: 0;
  background: linear-gradient(#b9ced2, #e1d1b4 58%, #6e7b5e 59%);
}

.painting-sky.is-forged {
  background: linear-gradient(#b9ced2, #e5d6b9 58%, #647a66 59%);
}

.painting-moon {
  left: 22%;
  top: 16%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f5ead4;
}

.painting-house {
  left: 41%;
  top: 42%;
  width: 96px;
  height: 72px;
  background: #704a3e;
  clip-path: polygon(0 35%, 50% 0, 100% 35%, 100% 100%, 0 100%);
}

.painting-tree {
  left: 70%;
  top: 38%;
  width: 62px;
  height: 118px;
  background: #335541;
  clip-path: polygon(50% 0, 88% 72%, 62% 72%, 62% 100%, 38% 100%, 38% 72%, 12% 72%);
}

.painting-signature {
  right: 14%;
  top: 26%;
  color: #5b3140;
  font-family: ui-serif, Georgia, serif;
  font-weight: 700;
}

.painting-book {
  left: 30%;
  bottom: 18%;
  width: 44px;
  height: 18px;
  border-radius: 3px;
  background: #375f68;
}

.painting-book.is-red {
  background: #8b3f53;
}

.painting-keyhole {
  left: 50%;
  top: 56%;
  width: 14px;
  height: 22px;
  border-radius: 999px 999px 4px 4px;
  background: transparent;
}

.painting-keyhole.is-visible {
  background: #101615;
}

.difference-hit {
  position: absolute;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.02);
}

.difference-hit:hover,
.difference-hit.is-found {
  border-color: #9ef0cc;
  background: rgba(158, 240, 204, 0.16);
}

.difference-hit.is-found span {
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  border-radius: 50%;
  background: #9ef0cc;
  box-shadow: 0 0 15px rgba(158, 240, 204, 0.72);
}

.spot-difference-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.safe-reveal {
  position: absolute;
  inset: 18%;
  border: 6px solid #716356;
  border-radius: 8px;
  background: #101615;
  color: #9ef0cc;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 10px rgba(255, 253, 248, 0.08);
}

.safe-reveal svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.pipe-plumber-preview {
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-content: stretch;
  min-height: 0;
}

.pipe-board-shell {
  min-height: 280px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pipe-board {
  --pipe-cols: calc(var(--pipe-size) + 2);
  --pipe-rows: var(--pipe-size);
  position: relative;
  box-sizing: border-box;
  aspect-ratio: calc(var(--pipe-cols) / var(--pipe-rows));
  width: min(100%, 640px);
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--pipe-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--pipe-rows), minmax(0, 1fr));
  gap: 0;
  box-shadow: inset 0 0 0 999px rgba(32, 35, 38, 0.42);
  isolation: isolate;
}

@supports (width: 1cqh) {
  .pipe-board-shell {
    container-type: size;
  }

  .pipe-board {
    width: min(100%, 640px, calc(100cqh * var(--pipe-cols) / var(--pipe-rows)));
  }
}

.gameplay-mini-modal.is-in-frame .pipe-plumber-preview {
  height: 100%;
  min-height: 0;
}

.gameplay-mini-modal.is-in-frame .pipe-board-shell {
  min-height: 0;
  height: 100%;
  width: 100%;
}

.gameplay-mini-modal.is-in-frame .pipe-board {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

@supports (width: 1cqh) {
  .gameplay-mini-modal.is-in-frame .pipe-board {
    width: min(100cqw, calc(100cqh * var(--pipe-cols) / var(--pipe-rows)));
  }
}

.pipe-endpoint-cell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
  overflow: hidden;
}

.pipe-valve-cell {
  grid-column: 1;
  grid-row: 1;
}

.pipe-drain-cell {
  grid-column: calc(var(--pipe-size) + 2);
  grid-row: var(--pipe-size);
}

.pipe-endpoint-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.pipe-tile {
  position: relative;
  grid-column: var(--pipe-col);
  grid-row: var(--pipe-row);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
}

.pipe-tile:hover {
  z-index: 1;
}

.pipe-tile:hover .pipe-tile-sprite,
.pipe-tile:hover .pipe-tile-svg {
  filter: drop-shadow(0 0 8px rgba(158, 240, 204, 0.35));
}

.pipe-shape {
  position: absolute;
  inset: 0;
  transform: rotate(var(--pipe-rotation, 0deg));
  transition: transform 0.16s ease;
  transform-origin: 50% 50%;
  pointer-events: none;
  overflow: hidden;
}

.pipe-tile-sprite,
.pipe-endpoint-sprite {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: calc(var(--pipe-frame-count, 6) * 100%) 100%;
  background-position: calc(var(--pipe-frame, 0) * 100% / (var(--pipe-frame-count, 6) - 1)) 50%;
}

.pipe-tile-img,
.pipe-tile-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  background: transparent;
}

.pipe-plumber-preview.is-solved .pipe-tile-sprite,
.pipe-plumber-preview.is-solved .pipe-tile-svg,
.pipe-plumber-preview.is-solved .pipe-endpoint-sprite {
  filter: drop-shadow(0 0 10px rgba(158, 240, 204, 0.42));
}

.laser-mirror-preview {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  min-height: 0;
}

.laser-mirror-preview.is-in-frame {
  grid-template-rows: minmax(0, 1fr);
}

.laser-board-shell {
  min-height: 280px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.laser-board {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 1;
  width: min(100%, 640px);
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: repeat(var(--laser-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--laser-size), minmax(0, 1fr));
  gap: 0;
  isolation: isolate;
}

@supports (width: 1cqh) {
  .laser-board-shell {
    container-type: size;
  }

  .laser-board {
    width: min(100%, 640px, 100cqh);
  }
}

.gameplay-mini-modal.is-in-frame .laser-mirror-preview {
  height: 100%;
  min-height: 0;
}

.gameplay-mini-modal.is-in-frame .laser-board-shell {
  min-height: 0;
  height: 100%;
  width: 100%;
}

.laser-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: var(--laser-col);
  grid-row: var(--laser-row);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255, 253, 248, 0.08);
  border-radius: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
}

.laser-cell .laser-shape {
  z-index: 1;
}

.laser-cell.is-E,
.laser-cell.is-R,
.laser-cell.is-C,
.laser-cell.is-obstacle,
.laser-cell.is-mirror,
.laser-cell.is-movable {
  z-index: 3;
}

.laser-cell.is-E,
.laser-cell.is-R,
.laser-cell.is-C,
.laser-cell.is-obstacle {
  cursor: default;
}

.laser-cell:disabled {
  cursor: default;
  opacity: 1;
}

.laser-cell.is-empty:hover,
.laser-cell.is-mirror:hover,
.laser-cell.is-movable:hover {
  background: rgba(255, 90, 60, 0.08);
}

.laser-shape,
.laser-cell-pad {
  position: relative;
  display: block;
  width: 82%;
  height: 82%;
  max-width: 56px;
  max-height: 56px;
  pointer-events: none;
  opacity: 1;
}

.laser-piece-icon {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.laser-piece-icon.is-mirror {
  width: 14%;
  height: 78%;
  margin: 11% auto;
  border-radius: 2px;
  background: linear-gradient(135deg, #f7efc8, #c9a24a 50%, #7a5a22);
  box-shadow: 0 0 0 1px #f3e2a7;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
}

.laser-piece-icon.is-mirror.is-backslash {
  transform: rotate(135deg);
}

.laser-piece-icon.is-obstacle {
  width: 72%;
  height: 72%;
  margin: 14%;
  border-radius: 6px;
  background: #3a3230;
  box-shadow: inset 0 0 0 2px #6a5a52;
}

.laser-piece-icon.is-emitter,
.laser-piece-icon.is-receiver {
  border-radius: 50%;
  transform: rotate(var(--laser-rotation, 0deg));
}

.laser-piece-icon.is-emitter {
  background:
    radial-gradient(circle at 42% 50%, #ff5a3c 0 18%, transparent 19%),
    linear-gradient(90deg, #4a5560 0 48%, #ff5a3c 48% 100%);
  box-shadow: inset 0 0 0 2px #c9d2da;
}

.laser-piece-icon.is-receiver {
  background:
    radial-gradient(circle, #8be7c4 0 12%, #123 13% 28%, #2c3a44 29%);
  box-shadow: inset 0 0 0 2px #8be7c4;
}

.laser-piece-icon.is-checkpoint {
  width: 42%;
  height: 42%;
  margin: 29%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, #fff6d8 0 18%, #7ee0ff 19% 42%, #1a3a4a 43%);
  box-shadow: 0 0 0 2px #7ee0ff, 0 0 8px rgba(126, 224, 255, 0.45);
}

.laser-cell.is-C.is-lit .laser-piece-icon.is-checkpoint {
  background:
    radial-gradient(circle at 50% 45%, #fff 0 22%, #8be7c4 23% 48%, #145 49%);
  box-shadow: 0 0 0 2px #8be7c4, 0 0 12px rgba(139, 231, 196, 0.85);
}

.laser-tile-svg,
.laser-tile-sprite,
.laser-shape-custom {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}

.laser-shape-custom {
  transform: rotate(var(--laser-rotation, 0deg));
}

.laser-token {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  cursor: grab;
  overflow: hidden;
}

.laser-token .laser-shape {
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
}

.laser-tile-sprite {
  background-repeat: no-repeat;
  background-size: calc(var(--laser-frame-count, 5) * 100%) 100%;
  background-position: calc(var(--laser-frame, 0) * 100% / (var(--laser-frame-count, 5) - 1)) 50%;
}

.laser-beam-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.laser-beam-glow {
  filter: drop-shadow(0 0 4px currentColor);
}

.laser-mirror-preview.is-solved .laser-beam-glow {
  filter: drop-shadow(0 0 8px rgba(139, 231, 196, 0.85));
}

.laser-tray-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px 0;
}

.laser-tray {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 56px;
  flex: 1;
}

.laser-token.is-selected,
.laser-mirror-preview.has-selection .laser-token {
  border-color: #ff5a3c;
  box-shadow: 0 0 0 2px rgba(255, 90, 60, 0.28);
}

.laser-tray-empty {
  color: var(--muted);
  font-size: 13px;
}

.laser-solution {
  max-width: 220px;
}

.laser-solution-board {
  width: 220px;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}

.laser-solution .laser-cell {
  cursor: default;
}

.pipe-sprite-assets {
  display: grid;
  gap: 12px;
}

.pipe-sprite-asset-row.is-main-pipe {
  border: 1px solid rgba(158, 240, 204, 0.28);
  border-radius: 8px;
  padding: 12px;
  background: rgba(158, 240, 204, 0.05);
}

.pipe-controls {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.pipe-preset-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pipe-preset-label {
  min-width: 140px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.moving-blocks-solution {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 168px;
  overflow: auto;
  word-break: break-word;
}

.pipe-dev-solve {
  color: #9ef0cc;
}

.decryption-preview {
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  align-content: stretch;
  min-height: 0;
  gap: 10px;
}

.decrypt-board-shell {
  min-height: 280px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.decrypt-board {
  --decrypt-line: rgba(72, 230, 255, 0.35);
  --decrypt-line-strong: rgba(72, 230, 255, 0.92);
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 1;
  width: min(100%, 560px);
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border: 2px solid var(--decrypt-line-strong);
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: repeat(var(--decrypt-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--decrypt-size), minmax(0, 1fr));
  gap: 0;
  box-shadow: 0 0 24px rgba(72, 230, 255, 0.18);
  isolation: isolate;
}

@supports (width: 1cqh) {
  .decrypt-board-shell {
    container-type: size;
  }

  .decrypt-board {
    width: min(100%, 560px, 100cqh);
  }
}

.gameplay-mini-modal.is-in-frame .decryption-preview {
  height: 100%;
  min-height: 0;
}

.gameplay-mini-modal.is-in-frame .decrypt-board-shell {
  min-height: 0;
  height: 100%;
  width: 100%;
}

.decrypt-cell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-style: solid;
  border-color: var(--decrypt-line);
  border-width: 1px;
  border-radius: 0;
  background: rgba(6, 28, 34, 0.28);
  padding: 6%;
  cursor: pointer;
  overflow: hidden;
}

.decrypt-cell.is-edge-n {
  border-top-width: 3px;
  border-top-color: var(--decrypt-line-strong);
}

.decrypt-cell.is-edge-e {
  border-right-width: 3px;
  border-right-color: var(--decrypt-line-strong);
}

.decrypt-cell.is-edge-s {
  border-bottom-width: 3px;
  border-bottom-color: var(--decrypt-line-strong);
}

.decrypt-cell.is-edge-w {
  border-left-width: 3px;
  border-left-color: var(--decrypt-line-strong);
}

.decrypt-cell.is-given {
  cursor: default;
  background: rgba(72, 230, 255, 0.08);
}

.decrypt-cell.is-selected {
  outline: 2px solid #48e6ff;
  outline-offset: -4px;
  border-radius: 8px;
  z-index: 1;
}

.decrypt-cell.is-conflict .decrypt-rune-sprite,
.decrypt-rune-sprite.is-conflict-rune {
  filter: hue-rotate(-20deg) saturate(1.4) drop-shadow(0 0 8px rgba(220, 48, 48, 0.7));
}

.decrypt-cell:hover:not(:disabled) {
  background: rgba(72, 230, 255, 0.12);
}

.decrypt-rune-sprite {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: calc(var(--decrypt-frame-count, 6) * 100%) 100%;
  background-position: calc(var(--decrypt-frame, 0) * 100% / (var(--decrypt-frame-count, 6) - 1)) 50%;
}

.decrypt-palette {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.decrypt-palette-btn {
  width: 52px;
  height: 52px;
  padding: 6px;
  border: 1px solid rgba(72, 230, 255, 0.35);
  border-radius: 10px;
  background: rgba(6, 28, 34, 0.72);
  cursor: pointer;
}

.decrypt-palette-btn.is-selected {
  border-color: #48e6ff;
  box-shadow: 0 0 12px rgba(72, 230, 255, 0.45);
}

.decrypt-erase-btn {
  width: auto;
  min-width: 64px;
  color: #9ad8e8;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.decryption-preview.is-solved .decrypt-rune-sprite {
  filter: drop-shadow(0 0 10px rgba(72, 230, 255, 0.55));
}

.decryption-preview.is-solved {
  grid-template-rows: minmax(0, 1fr);
}

.decrypt-success-screen {
  min-height: 280px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #06262c;
  box-shadow: 0 0 24px rgba(72, 230, 255, 0.18);
}

.gameplay-mini-modal.is-in-frame .decrypt-success-screen {
  min-height: 0;
}

.gameplay-popup-frame.is-mini.is-pipe-mini .decryption-preview {
  height: 100%;
  min-height: 0;
}

.gameplay-popup-frame.is-mini.is-pipe-mini .decrypt-board-shell {
  min-height: 0;
}

.moving-blocks-preview {
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-content: stretch;
  min-height: 0;
}

.moving-blocks-board-shell {
  min-height: 280px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.moving-blocks-board {
  --moving-blocks-gap: 6px;
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 1;
  width: min(100%, 560px);
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border: 10px solid #8b5a2b;
  border-radius: 10px;
  background: #3a2414;
  box-shadow:
    inset 0 0 0 3px #5c3a1e,
    0 10px 24px rgba(20, 12, 6, 0.45);
  display: grid;
  grid-template-columns: repeat(var(--moving-blocks-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--moving-blocks-size), minmax(0, 1fr));
  gap: var(--moving-blocks-gap);
  padding: var(--moving-blocks-gap);
  isolation: isolate;
}

@supports (width: 1cqh) {
  .moving-blocks-board-shell {
    container-type: size;
  }

  .moving-blocks-board {
    width: min(100%, 560px, 100cqh);
  }
}

.moving-blocks-cell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255, 239, 183, 0.28);
  border-radius: 6px;
  background-color: #5c3a1e;
  background-size: cover;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(32, 20, 10, 0.35);
}

.moving-blocks-cell.is-empty {
  background: #24160e;
  border-color: rgba(20, 10, 6, 0.8);
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.55);
  cursor: default;
}

.moving-blocks-cell.is-empty.is-drop-target {
  cursor: pointer;
  outline: 2px solid #fffdf8;
  outline-offset: -2px;
  box-shadow: inset 0 0 18px rgba(255, 253, 248, 0.18);
}

.moving-blocks-cell.is-selected {
  outline: 3px solid #fffdf8;
  outline-offset: -3px;
  z-index: 2;
}

.moving-blocks-cell.is-selected::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 3px solid rgba(255, 253, 248, 0.92);
  border-top-color: transparent;
  border-left-color: transparent;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255, 253, 248, 0.45);
}

.moving-blocks-cell.is-locked {
  cursor: default;
  filter: saturate(0.82) brightness(0.9);
  box-shadow:
    inset 0 0 0 3px rgba(58, 36, 20, 0.72),
    inset 0 0 16px rgba(20, 10, 4, 0.35);
}

.moving-blocks-cell.is-locked::after {
  content: "";
  position: absolute;
  width: 18%;
  height: 18%;
  min-width: 8px;
  min-height: 8px;
  left: 50%;
  top: 10%;
  translate: -50% 0;
  border: 2px solid rgba(58, 36, 20, 0.9);
  border-radius: 2px 2px 3px 3px;
  background: rgba(234, 215, 181, 0.18);
  box-shadow: 0 7px 0 -2px rgba(58, 36, 20, 0.9);
  pointer-events: none;
}

.moving-blocks-preview.is-solved .moving-blocks-cell {
  animation: jigsawPiecePulse 2.55s ease-out both;
  animation-delay: calc(var(--tile-index, 0) * 28ms);
  cursor: default;
  outline: none;
}

.gameplay-mini-modal.is-in-frame .moving-blocks-preview {
  height: 100%;
  min-height: 0;
}

.gameplay-mini-modal.is-in-frame .moving-blocks-board-shell {
  min-height: 0;
  height: 100%;
  width: 100%;
}

.gameplay-popup-frame.is-mini.is-pipe-mini .moving-blocks-preview {
  height: 100%;
  min-height: 0;
}

.gameplay-popup-frame.is-mini.is-pipe-mini .moving-blocks-board-shell {
  min-height: 0;
}

.hanoi-board {
  min-height: 360px;
  border: 1px solid #5c5044;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  padding: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  box-shadow: inset 0 0 0 999px rgba(32, 35, 38, 0.36);
}

.hanoi-preview.is-solved {
  grid-template-rows: minmax(0, 1fr);
}

.hanoi-success-screen {
  min-height: 360px;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #3a2a1c;
  box-shadow: inset 0 0 0 1px #5c5044;
}

.gameplay-mini-modal.is-in-frame .hanoi-success-screen {
  min-height: 0;
}

.hanoi-peg {
  position: relative;
  min-height: 280px;
  border: 1px solid rgba(255, 253, 248, 0.24);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.08);
  display: grid;
  align-items: end;
  padding: 18px;
}

.hanoi-peg:hover,
.hanoi-peg.is-selected {
  border-color: #9ef0cc;
  background: rgba(158, 240, 204, 0.12);
}

.peg-post {
  position: absolute;
  left: 50%;
  bottom: 36px;
  width: 14px;
  height: 202px;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background: #c19a6b;
}

.peg-base {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 28px;
  height: 18px;
  border-radius: 999px;
  background: #c19a6b;
}

.hanoi-peg-stand {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 0;
  width: min(42%, 92px);
  height: 78%;
  transform: translateX(-50%);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 1;
  filter: none;
}

.hanoi-preview.has-peg-art .peg-post,
.hanoi-preview.has-peg-art .peg-base {
  display: none;
}

.disc-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  margin-bottom: 30px;
}

.hanoi-disc {
  width: var(--disc-width);
  height: calc(28px * var(--disc-scale, 1));
  border-radius: 999px;
  background: linear-gradient(180deg, #d8a433, #8b3f53);
  color: #fffdf8;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 12px;
  box-shadow: inset 0 -4px 0 rgba(32, 35, 38, 0.18);
}

.hanoi-preview.has-disc-art .hanoi-disc {
  height: auto;
  aspect-ratio: 512 / 101;
  max-width: 100%;
  margin-block: 0;
  border-radius: 0;
  color: transparent;
  text-shadow: none;
  box-shadow: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.hanoi-preview.is-solved .hanoi-disc {
  background: linear-gradient(180deg, #9ec28a, #587b46);
}

.hanoi-preview.has-disc-art.is-solved .hanoi-disc {
  filter: drop-shadow(0 0 8px rgba(158, 194, 138, 0.55));
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.safe-lock-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 360px;
  padding: 0;
  overflow: hidden;
}

.safe-lock-preview-shell {
  display: grid;
  gap: 10px;
}

.safe-lock-library-reset {
  justify-self: start;
}

.safe-lock-scene,
.safe-lock-success-screen {
  min-height: 360px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.safe-lock-success-screen {
  background-color: #1a120c;
  box-shadow: inset 0 0 0 1px #5c5044;
}

.safe-lock-scene {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  justify-items: center;
  align-content: stretch;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.safe-lock-board {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
}

.safe-lock-fit {
  position: relative;
  width: max-content;
  max-width: 100%;
}

.safe-lock-board-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100cqw;
  max-height: 100cqh;
  object-fit: contain;
  object-position: center;
}

.safe-lock-layer {
  position: absolute;
  inset: 0;
}

.safe-lock-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  justify-items: center;
  padding: 18px 18px 8px;
}

.safe-lock-dial-wrap {
  position: absolute;
  z-index: 2;
  width: 32%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  touch-action: none;
  user-select: none;
  cursor: grab;
  pointer-events: auto;
  container-type: size;
}

.safe-lock-dial-wrap:active {
  cursor: grabbing;
}

.safe-lock-flash {
  position: absolute;
  inset: 8%;
  z-index: 4;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

.safe-lock-dial-wrap.is-flash-ok .safe-lock-flash {
  animation: safe-lock-flash-ok 0.7s ease-out;
}

.safe-lock-dial-wrap.is-flash-bad .safe-lock-flash {
  animation: safe-lock-flash-bad 0.7s ease-out;
}

.safe-lock-dial-wrap.is-flash-ok .safe-lock-hub {
  animation: safe-lock-hub-flash-ok 0.7s ease-out forwards;
}

.safe-lock-dial-wrap.is-flash-bad .safe-lock-hub {
  animation: safe-lock-hub-flash-bad 0.7s ease-out forwards;
}

@keyframes safe-lock-flash-ok {
  0% {
    opacity: 1;
    background: rgba(46, 196, 110, 0.48);
    box-shadow: inset 0 0 42px rgba(70, 230, 130, 0.7);
  }
  100% {
    opacity: 0;
  }
}

@keyframes safe-lock-flash-bad {
  0% {
    opacity: 1;
    background: rgba(214, 64, 64, 0.5);
    box-shadow: inset 0 0 42px rgba(255, 80, 80, 0.7);
  }
  100% {
    opacity: 0;
  }
}

@keyframes safe-lock-hub-flash-ok {
  0% {
    border-color: #5dff9a;
    box-shadow: 0 0 18px rgba(70, 230, 130, 0.9);
  }
  100% {
    border-color: rgba(230, 197, 106, 0.55);
    box-shadow: none;
  }
}

@keyframes safe-lock-hub-flash-bad {
  0% {
    border-color: #ff6b6b;
    box-shadow: 0 0 18px rgba(255, 80, 80, 0.85);
  }
  100% {
    border-color: rgba(230, 197, 106, 0.55);
    box-shadow: none;
  }
}

.safe-lock-index {
  position: absolute;
  top: 4%;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 16px solid #e6c56a;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.safe-lock-dial {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: transform;
}

.safe-lock-dial-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 0 0;
}

.safe-lock-tick-ring {
  position: absolute;
  inset: 6%;
  pointer-events: none;
}

.safe-lock-tick {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.safe-lock-tick-mark {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 8%;
  transform: translateX(-50%);
  background: #f3ead4;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.safe-lock-tick.is-major .safe-lock-tick-mark {
  height: 12%;
  width: 3px;
  background: #e6c56a;
}

.safe-lock-tick-label {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  transform-origin: center center;
  color: #f5ead4;
  font-size: 5.6cqi;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  pointer-events: none;
}

.safe-lock-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 28%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(18, 22, 26, 0.72);
  border: 2px solid rgba(230, 197, 106, 0.55);
  display: grid;
  place-items: center;
  align-content: center;
  color: #f5ead4;
  pointer-events: none;
}

.safe-lock-hub span {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.safe-lock-hub strong {
  font-size: 28px;
  line-height: 1;
}

.safe-lock-side {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.safe-lock-handle {
  position: absolute;
  z-index: 3;
  width: 9%;
  height: 32%;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  cursor: pointer;
  filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.45));
}

.safe-lock-handle:hover,
.safe-lock-handle:focus-visible {
  filter: brightness(1.08);
}

.safe-lock-handle:active {
  filter: brightness(1.16) drop-shadow(0 0 10px rgba(230, 197, 106, 0.5));
}

.safe-lock-handle.is-flash-ok {
  animation: safe-lock-handle-flash-ok 0.5s ease-out;
}

.safe-lock-handle.is-flash-bad {
  animation: safe-lock-handle-flash-bad 0.5s ease-out;
}

@keyframes safe-lock-handle-flash-ok {
  0% {
    filter: brightness(1.28) drop-shadow(0 0 16px rgba(70, 230, 130, 0.8));
  }
  100% {
    filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.45));
  }
}

@keyframes safe-lock-handle-flash-bad {
  0% {
    filter: brightness(1.18) drop-shadow(0 0 16px rgba(255, 80, 80, 0.75));
  }
  100% {
    filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.45));
  }
}

.gameplay-mini-modal.is-in-frame .safe-lock-preview-shell,
.gameplay-mini-modal.is-in-frame .safe-lock-preview,
.gameplay-mini-modal.is-in-frame .safe-lock-scene,
.gameplay-mini-modal.is-in-frame .safe-lock-success-screen {
  min-height: 0;
  height: 100%;
}

.weight-balance-answer-editor {
  gap: 10px;
}

.weight-balance-item-row {
  align-items: start;
}

.weight-balance-item-details {
  display: grid;
  gap: 4px;
  align-content: start;
}

.weight-balance-item-label-input {
  font-weight: 780;
  color: var(--ink);
  border-color: transparent;
  background: transparent;
  padding: 0;
  min-height: 0;
  height: auto;
}

.weight-balance-item-label-input:hover,
.weight-balance-item-label-input:focus {
  border-color: var(--line-strong);
  background: #fff;
  padding: 6px 8px;
}

.weight-balance-item-weight-field {
  margin-top: 2px;
  max-width: 160px;
}

.weight-balance-item-actions {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: stretch;
}

.compact-weight-field {
  gap: 4px;
}

.compact-weight-field span {
  font-size: 12px;
  color: var(--muted);
}

.weight-balance-dev-config-status {
  margin: 10px 0 6px;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.3;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.03);
}

.weight-balance-dev-config-status.is-ok {
  color: var(--leaf);
  border-color: rgba(88, 123, 70, 0.45);
  background: rgba(88, 123, 70, 0.09);
}

.weight-balance-dev-config-status.is-bad {
  color: var(--danger);
  border-color: rgba(163, 59, 52, 0.45);
  background: rgba(163, 59, 52, 0.07);
}

.scale-scene {
  position: relative;
  min-height: 594px;
  border: 1px solid #5c5044;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 999px rgba(32, 35, 38, 0.36);
}

.weight-balance-preview.is-solved .scale-scene {
  animation: jigsawPiecePulse 2.55s ease-out both;
}

.weight-balance-preview.is-solved .scale-scene::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 5;
  border: 1px solid rgba(255, 239, 183, 0.88);
  border-radius: 8px;
  box-shadow:
    inset 0 0 18px rgba(255, 232, 168, 0.48),
    0 0 22px rgba(209, 170, 98, 0.44);
  pointer-events: none;
  animation: jigsawSparkSettle 2.65s ease-out both;
}

.weight-balance-preview.is-solved .scale-beam::before,
.weight-balance-preview.is-solved .pan-bowl,
.weight-balance-preview.is-solved .scale-stand {
  background: linear-gradient(180deg, #ffe9ae, #d8a433);
}

.weight-balance-preview.is-solved .scale-beam::before,
.weight-balance-preview.is-solved .pan-bowl,
.weight-balance-preview.is-solved .scale-stand,
.weight-balance-preview.is-solved .weight-scale-sprite {
  filter: drop-shadow(0 0 10px rgba(209, 170, 98, 0.42));
}

.weight-balance-preview.is-solved.has-scale-sprites .scale-beam::before,
.weight-balance-preview.is-solved.has-scale-sprites .scale-stand {
  filter: none;
}

.weight-scale-sprite {
  display: block;
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  background-color: transparent;
  background-repeat: no-repeat;
  /* All frames are square — width === height keeps original proportions. */
  width: var(--weight-scale-tile, 324px);
  height: var(--weight-scale-tile, 324px);
  aspect-ratio: 1 / 1;
  background-size: calc(var(--weight-scale-frame-count, 4) * 100%) 100%;
  background-position: calc(var(--weight-scale-frame, 0) * 100% / (var(--weight-scale-frame-count, 4) - 1)) 50%;
}

.weight-balance-preview.has-scale-sprites .scale-scene {
  overflow: hidden;
  width: 100%;
  min-height: calc(var(--weight-scale-tile, 324px) * 1.55);
  height: auto;
  max-height: none;
  padding: 0 12px 16px;
  place-items: start center;
  align-content: start;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scale-beam--sprites {
  --weight-scale-tile: 324px;
  --weight-scale-pan: calc(var(--weight-scale-tile) * 0.56);
  position: relative;
  width: calc(var(--weight-scale-tile) + var(--weight-scale-pan) * 1.15);
  max-width: 100%;
  height: calc(var(--weight-scale-tile) * 1.45);
  margin: 0 auto;
  /* Pull the whole scale flush toward the top of the frame (sprite has empty headroom). */
  transform: translateY(calc(var(--weight-scale-tile) * -0.36));
  overflow: visible;
}

.scale-beam--sprites::before {
  display: none;
}

/*
  Assembly (matches reference):
  - beam near the top of the board
  - stand centered under the beam pivot
  - pans hanging from beam end rings
*/
.scale-beam--sprites .scale-sprite-stand {
  left: 50%;
  /* Stand tip (~top of tile) meets beam pivot (tile center). */
  top: calc(var(--weight-scale-tile) * 0.42);
  bottom: auto;
  transform: translateX(-50%);
  z-index: 1;
}

.scale-beam--sprites .scale-armature {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--weight-scale-tile);
  height: var(--weight-scale-tile);
  margin-left: calc(var(--weight-scale-tile) / -2);
  transform: rotate(var(--tilt));
  transform-origin: 50% 50%;
  transition: transform 160ms ease;
  z-index: 2;
  overflow: visible;
}

.scale-beam--sprites .scale-sprite-beam {
  left: 0;
  top: 0;
  right: auto;
  margin: 0;
  transform: none;
  z-index: 2;
}

.has-scale-sprites .scale-pan {
  position: absolute;
  /* Anchor at beam vertical center (where end eyelets sit). */
  top: 50%;
  width: var(--weight-scale-pan);
  height: var(--weight-scale-pan);
  min-height: 0;
  padding: 18px;
  border: 1px solid rgba(255, 253, 248, 0.34);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.12);
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-sizing: border-box;
}

/* Connect pan top rings to beam end eyelets. */
.has-scale-sprites .left-pan {
  left: 0;
  right: auto;
  transform: translate(-28%, -4%);
}

.has-scale-sprites .right-pan {
  right: 0;
  left: auto;
  transform: translate(28%, -4%);
}

.has-scale-sprites .scale-pan:hover {
  border-color: #9ef0cc;
  filter: none;
}

.has-scale-sprites .scale-sprite-pan {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  transform: none;
  z-index: 0;
  pointer-events: none;
}

.has-scale-sprites .pan-items {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
}

.has-scale-sprites .pan-pyramid {
  width: max-content;
  max-width: 100%;
  margin: 0;
  justify-content: center !important;
  align-items: center !important;
  place-self: center;
}

.has-scale-sprites .pan-pyramid-row {
  justify-content: center !important;
  width: max-content;
  margin-inline: auto;
}

.has-scale-sprites .pan-items .weight-pan-object,
.has-scale-sprites .pan-items .weight-object {
  place-self: center;
  margin: 0 auto;
}

/* If a full weight-object card lands in a pan frame, shrink it to a centered chip. */
.has-scale-sprites .pan-items .weight-object {
  width: var(--pan-item-size, 58px);
  min-width: var(--pan-item-size, 58px);
  max-width: var(--pan-item-size, 58px);
  height: var(--pan-item-size, 58px);
  min-height: var(--pan-item-size, 58px);
  max-height: var(--pan-item-size, 58px);
  padding: 2px;
  gap: 0;
  grid-template-rows: 1fr;
  box-shadow: none;
}

.has-scale-sprites .pan-items .weight-object-label,
.has-scale-sprites .pan-items .weight-object-weight-hint {
  display: none;
}

.has-scale-sprites .pan-items .weight-object-icon {
  width: 100%;
  height: 100%;
}

@media (max-width: 720px) {
  .scale-beam--sprites {
    --weight-scale-tile: 266px;
  }
}

.scale-beam {
  position: relative;
  width: min(92%, 680px);
  height: 450px;
  transform: none;
}

.scale-beam::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 84px;
  height: 10px;
  border-radius: 999px;
  background: #d9c5a7;
  transform: rotate(var(--tilt));
  transform-origin: center;
  transition: transform 160ms ease;
}

.scale-stand {
  position: absolute;
  left: 50%;
  top: 84px;
  bottom: 12px;
  width: 14px;
  transform: translateX(-50%);
  background: #d9c5a7;
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
}

.scale-pan {
  position: absolute;
  z-index: 2;
  top: 100px;
  width: 324px;
  min-height: 198px;
  border: 1px solid rgba(255, 253, 248, 0.34);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.12);
  padding: 22px;
  display: grid;
  align-content: end;
  cursor: pointer;
  overflow: hidden;
}

.left-pan {
  left: 0;
  transform: translateY(var(--left-pan-y));
}

.right-pan {
  right: 0;
  transform: translateY(var(--right-pan-y));
}

.scale-pan:hover {
  border-color: #9ef0cc;
}

.pan-bowl {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 18px;
  border-radius: 0 0 999px 999px;
  background: #d9c5a7;
}

.weight-table {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pan-items {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  min-height: 141px;
  padding-bottom: 2px;
}

.pan-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 100%;
}

.pan-pyramid-row {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 2px;
}

.weight-pan-object {
  flex: 0 0 var(--pan-item-size, 65px);
  width: var(--pan-item-size, 65px);
  height: var(--pan-item-size, 65px);
  min-width: var(--pan-item-size, 65px);
  max-width: var(--pan-item-size, 65px);
  min-height: var(--pan-item-size, 65px);
  max-height: var(--pan-item-size, 65px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 2px;
  margin: 0;
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.08);
  box-shadow: 0 2px 6px rgba(32, 35, 38, 0.12);
  overflow: hidden;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
}

.weight-pan-object:hover,
.weight-pan-object.is-selected {
  border-color: var(--accent);
}

.weight-pan-object-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.weight-pan-object-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  font-size: calc(var(--pan-item-size, 65px) * 0.28);
  font-weight: 800;
  line-height: 1;
  color: white;
}

.weight-table {
  min-height: 48px;
  padding: 4px;
  align-items: center;
}

.weight-pan-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.weight-pan-actions .button {
  justify-content: center;
}

.weight-pan-actions .button:last-child svg {
  transform: rotate(180deg);
}

.weight-object {
  width: 96px;
  min-height: 86px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: transparent;
  color: white;
  display: grid;
  grid-template-rows: auto minmax(0, auto);
  place-items: center;
  gap: 5px;
  padding: 7px;
  cursor: grab;
  box-shadow: 0 8px 14px rgba(32, 35, 38, 0.1);
}

.weight-object:hover,
.weight-object.is-selected {
  border-color: var(--accent);
  color: white;
}

.weight-object-icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: transparent; 
  color: white;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 800;
}

.weight-object-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.weight-object-label {
  font-weight: 800;
  font-size: 11px;
  line-height: 1.12;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.weight-object-weight-hint {
  display: block;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 700;
  color: #d8a433;
  text-align: center;
}

.weight-balance-preview.has-dev-weight-hints .weight-object {
  min-height: 98px;
}

.weight-balance-preview .button.ghost {
  justify-self: start;
}

.rotation-rings-preview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(196, 181, 154, 0.12), transparent 42%),
    linear-gradient(160deg, #2a241e 0%, #1a1714 55%, #12100e 100%);
  width: min(100%, 980px);
  margin: 0 auto;
  min-height: 720px;
  padding: 18px;
  display: grid;
  gap: 12px;
}

@property --ring-rotation {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.gameplay-mini-modal.is-in-frame .panel-body:has(.rotation-rings-preview) {
  container-type: size;
  display: grid;
  place-items: center;
  align-content: center;
  padding: clamp(8px, 1.6vw, 16px);
}

.gameplay-mini-modal.is-in-frame .mini-preview-surface.rotation-rings-preview {
  width: min(100%, calc(100cqh * 16 / 9));
  height: min(100%, calc(100cqw * 9 / 16));
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  padding: clamp(8px, 1.4cqw, 14px);
  gap: clamp(6px, 1cqh, 10px);
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.gameplay-mini-modal.is-in-frame .rotation-rings-scene {
  grid-template-columns: 1fr;
  gap: clamp(8px, 1.4cqw, 14px);
  min-height: 0;
  height: 100%;
  align-items: stretch;
  justify-items: center;
}

.gameplay-mini-modal.is-in-frame .rotation-rings-scene.is-rings-only .rotation-rings-door {
  width: min(100%, 920px, 96cqh);
  /* Must beat .is-rings-only { min-height: 720px } or the hub sits below the visible frame. */
  min-height: 0;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  place-items: center;
  align-content: center;
}

.gameplay-mini-modal.is-in-frame .rotation-rings-door {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: clamp(4px, 0.8cqh, 8px);
  place-items: center;
  align-content: center;
}

.gameplay-mini-modal.is-in-frame .rotation-rings-stack {
  width: min(100%, 640px, 85cqmin);
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  align-self: center;
  justify-self: center;
}

.gameplay-mini-modal.is-in-frame .rotation-rings-hit-zones {
  width: 42%;
  height: 46%;
  top: 1%;
}

.gameplay-mini-modal.is-in-frame .rotation-rings-preview > .rotation-rings-reset {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 10px;
}

.gameplay-mini-modal.is-in-frame .rotation-rings-preview > .preview-status {
  position: absolute;
  left: clamp(8px, 1.4cqw, 14px);
  right: clamp(8px, 1.4cqw, 14px);
  bottom: clamp(8px, 1.4cqh, 14px);
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.gameplay-mini-modal.is-in-frame .rotation-rings-preview.is-solved > .preview-status,
.gameplay-mini-modal.is-in-frame .rotation-rings-preview.is-wrong > .preview-status {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.rotation-rings-scene {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
  min-height: 0;
}

.rotation-rings-claw-rack {
  border-radius: 12px;
  border: 1px solid rgba(196, 181, 154, 0.28);
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 214, 138, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(39, 30, 20, 0.9), rgba(24, 21, 18, 0.96));
  display: grid;
  gap: 10px;
  padding: 12px;
}

.rotation-rings-claw-rack-head {
  display: grid;
  gap: 4px;
  text-align: center;
  color: #efe6d4;
}

.rotation-rings-claw-rack-head strong {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rotation-rings-claw-rack-head span {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(239, 230, 212, 0.7);
}

.rotation-rings-claw-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rotation-rings-claw-card {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.rotation-rings-claw-stage {
  perspective: 900px;
  width: 100%;
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
}

.rotation-rings-claw-stage:disabled {
  cursor: default;
}

.rotation-rings-claw-stage:focus-visible {
  outline: 2px solid rgba(240, 213, 138, 0.55);
  outline-offset: 4px;
}

.rotation-rings-claw-flip {
  position: relative;
  width: min(100%, 148px);
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  transition: transform 480ms ease;
}

.rotation-rings-claw-card.is-flipped .rotation-rings-claw-flip {
  transform: rotateY(180deg);
}

.rotation-rings-claw-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 0;
  border-radius: 0;
  display: block;
  padding: 0;
  color: #efe6d4;
  overflow: visible;
  background: var(--key-image) center / contain no-repeat;
  box-shadow: none;
}

.rotation-rings-claw-face.is-front {
  background: var(--key-image) center / contain no-repeat;
}

.rotation-rings-claw-face.is-back {
  transform: rotateY(180deg);
  background: var(--key-image) center / contain no-repeat;
}

.rotation-rings-claw-face::before {
  content: none;
}

.rotation-rings-claw-face strong {
  display: none;
}

.rotation-rings-claw-face > span,
.rotation-rings-claw-face > em {
  display: none;
}

.rotation-rings-claw-sequence {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
}

.rotation-rings-claw-slot {
  position: absolute;
  left: 50%;
  width: 13.8%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.rotation-rings-claw-slot[data-slot="0"] { top: 46%; }
.rotation-rings-claw-slot[data-slot="1"] { top: 58.5%; }
.rotation-rings-claw-slot[data-slot="2"] { top: 70.4%; }

.rotation-rings-claw-slot .ring-symbol-glyph {
  width: 92%;
  height: 92%;
  max-width: none;
  max-height: none;
  border-color: rgba(216, 164, 51, 0.7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.rotation-rings-claw-toggle {
  justify-self: center;
  min-height: 30px;
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(239, 230, 212, 0.78);
  border-color: rgba(196, 181, 154, 0.28);
  background: rgba(18, 16, 14, 0.45);
}

.rotation-rings-claw-toggle:hover {
  color: #f5d889;
  border-color: rgba(216, 164, 51, 0.55);
  background: rgba(42, 34, 24, 0.7);
}

.rotation-rings-claw-actions {
  width: 100%;
  display: grid;
  gap: 6px;
}

.rotation-rings-claw-insert {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2a2116;
  border: 1px solid #c9a24a;
  border-radius: 9px;
  background:
    linear-gradient(180deg, #f0d58a 0%, #d4a84a 42%, #a67b2e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.65),
    inset 0 -1px 0 rgba(74, 48, 14, 0.28),
    0 2px 0 rgba(42, 30, 12, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
}

.rotation-rings-claw-insert:hover {
  color: #1f180f;
  border-color: #e0b85a;
  background:
    linear-gradient(180deg, #f7e0a0 0%, #e0b85a 42%, #b88934 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 224, 0.75),
    inset 0 -1px 0 rgba(74, 48, 14, 0.22),
    0 2px 0 rgba(42, 30, 12, 0.5),
    0 0 16px rgba(216, 164, 51, 0.28);
}

.rotation-rings-claw-insert:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(74, 48, 14, 0.35),
    0 1px 0 rgba(42, 30, 12, 0.45);
}

.rotation-rings-claw-insert svg {
  color: #2a2116;
  filter: drop-shadow(0 1px 0 rgba(255, 240, 200, 0.25));
}

.rotation-rings-claw-hint {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(239, 230, 212, 0.7);
}

.rotation-rings-door {
  position: relative;
  min-height: 640px;
  border-radius: 12px;
  border: 1px solid rgba(196, 181, 154, 0.3);
  background: #141210;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18px 12px 12px;
}

.rotation-rings-door-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #141210;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.rotation-rings-door > .rotation-rings-stack {
  position: relative;
  z-index: 1;
}

.rotation-rings-stack {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-top: 0;
  margin-bottom: 4px;
}

.rotation-rings-stack-base,
.rotation-rings-gear-layer {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.rotation-rings-stack-base {
  z-index: 0;
  /* Hub only — gear rings come from rotating layers */
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, #000 27%, transparent 27.5%);
  mask: radial-gradient(circle closest-side at 50% 50%, #000 27%, transparent 27.5%);
}

.rotation-rings-gear-layer {
  z-index: 1;
  will-change: transform;
  transition: transform 340ms cubic-bezier(0.34, 1.05, 0.54, 1);
  transform-origin: 50% 50.54%;
}

/* Flat sprite ring bands (radius % of half-width) */
.rotation-rings-gear-layer.is-outer {
  z-index: 1;
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent 67%, #000 68%, #000 96%, transparent 97%);
  mask: radial-gradient(circle closest-side at 50% 50%, transparent 67%, #000 68%, #000 96%, transparent 97%);
}

.rotation-rings-gear-layer.is-middle {
  z-index: 2;
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent 43%, #000 44%, #000 67%, transparent 68%);
  mask: radial-gradient(circle closest-side at 50% 50%, transparent 43%, #000 44%, #000 67%, transparent 68%);
}

.rotation-rings-gear-layer.is-inner {
  z-index: 3;
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent 27%, #000 28%, #000 43%, transparent 44%);
  mask: radial-gradient(circle closest-side at 50% 50%, transparent 27%, #000 28%, #000 43%, transparent 44%);
}

.rotation-rings-housing {
  position: absolute;
  inset: 0;
  z-index: 9;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.rotation-rings-hit-zones {
  position: absolute;
  left: 50%;
  top: 2%;
  z-index: 16;
  width: 42%;
  height: 46%;
  transform: translateX(-50%);
  display: grid;
  grid-template-rows: 1.15fr 1fr 0.85fr;
  gap: 4px;
  pointer-events: none;
}

.rotation-rings-hit {
  pointer-events: auto;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 999px 999px 40% 40%;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.rotation-rings-hit:hover:not(:disabled),
.rotation-rings-hit:focus-visible:not(:disabled) {
  background: rgba(255, 214, 138, 0.12);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(240, 213, 138, 0.35);
}

.rotation-rings-hit:disabled {
  cursor: default;
}

.rotation-rings-aligner {
  display: none;
}

.rotation-rings-stack::before {
  content: none;
}

.rotation-ring {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.rotation-ring.is-outer {
  inset: 8%;
  z-index: 10;
}

.rotation-ring.is-middle {
  inset: 17%;
  z-index: 11;
}

.rotation-ring.is-inner {
  inset: 29%;
  z-index: 12;
}

.rotation-ring-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0;
  background: transparent;
  box-shadow: none;
  /* No transition: Key sequence icons snap to the active glyph at 12 o'clock. */
  transition: none;
  transform-origin: 50% 50.54%;
  overflow: visible;
}

.rotation-ring.is-middle .rotation-ring-disc,
.rotation-ring.is-inner .rotation-ring-disc {
  background: transparent;
}

.rotation-ring-disc::before {
  content: none;
}

.rotation-rings-markers {
  display: none;
}

.rotation-rings-marker {
  display: none;
}

.rotation-rings-window-readout {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
}

.rotation-rings-window-glyph {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  /* Disabled: yellow frame + dark fill behind glyph
  box-shadow:
    0 0 0 3px rgba(216, 164, 51, 0.95),
    0 0 14px rgba(216, 164, 51, 0.4),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  background: rgba(20, 16, 12, 0.92);
  */
  box-shadow: none;
  background: transparent;
  color: #f5e6c8;
}

.rotation-rings-window-glyph:disabled {
  cursor: default;
}

.rotation-rings-window-sprite {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
}

.rotation-rings-window-glyph.is-outer {
  top: calc(4.5% - 12px);
  width: 64px;
  height: 64px;
}

.rotation-rings-window-glyph.is-middle {
  top: 16.5%;
  width: 54px;
  height: 54px;
}

.rotation-rings-window-glyph.is-inner {
  top: 28.5%;
  width: 44px;
  height: 44px;
}

.rotation-rings-preview.is-solved .rotation-rings-window-readout {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rotation-ring-symbol {
  display: none;
}

.rotation-ring-symbol-face {
  position: absolute;
  left: 50%;
  top: 0.5%;
  width: 64px;
  display: grid;
  justify-items: center;
  gap: 3px;
  transform: translate(-50%, -50%) rotate(calc(-1 * (var(--angle) + var(--ring-rotation, 0deg))));
  color: #f4ecdc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.rotation-ring.is-outer .rotation-ring-symbol-face {
  top: -2.8%;
}

.rotation-ring.is-middle .rotation-ring-symbol-face {
  top: 1.5%;
  width: 56px;
  transform: translate(-50%, -50%) rotate(calc(-1 * (var(--angle) + var(--ring-rotation, 0deg))));
}

.rotation-ring.is-inner .rotation-ring-symbol-face {
  top: 2.5%;
  width: 48px;
  transform: translate(-50%, -50%) rotate(calc(-1 * (var(--angle) + var(--ring-rotation, 0deg))));
}

.rotation-ring-symbol:not(.is-aligned) {
  opacity: 0;
  visibility: hidden;
}

.rotation-ring-symbol:not(.is-aligned) .ring-symbol-glyph {
  opacity: 0;
  transform: none;
}

.rotation-ring-symbol-face em {
  font-style: normal;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 780;
  color: #f5d889;
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(18, 16, 14, 0.82);
  border: 1px solid rgba(216, 164, 51, 0.45);
  border-radius: 5px;
  padding: 2px 5px;
}

.rotation-ring.is-inner .rotation-ring-symbol-face em {
  font-size: 8px;
  max-width: 46px;
  padding: 1px 4px;
}

.rotation-ring-symbol.is-aligned .rotation-ring-symbol-face {
  z-index: 2;
}

.rotation-ring-symbol.is-aligned .ring-symbol-glyph {
  width: 56px;
  height: 56px;
  opacity: 1;
  transform: none;
  box-shadow:
    0 0 0 3px rgba(216, 164, 51, 0.95),
    0 0 14px rgba(216, 164, 51, 0.38);
  background-color: rgba(34, 28, 22, 0.88);
}

.rotation-ring.is-middle .rotation-ring-symbol.is-aligned .ring-symbol-glyph {
  width: 48px;
  height: 48px;
}

.rotation-ring.is-inner .rotation-ring-symbol.is-aligned .ring-symbol-glyph {
  width: 40px;
  height: 40px;
}

.rotation-rings-scene.is-rings-only {
  grid-template-columns: 1fr;
}

.rotation-rings-scene.is-rings-only .rotation-rings-door {
  min-height: 720px;
  width: min(100%, 840px);
  margin: 0 auto;
}

.rotation-rings-hub {
  position: relative;
  z-index: 4;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}

.rotation-ring-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}

.rotation-ring-btn {
  width: 100%;
  min-height: 30px;
  border: 1px solid rgba(196, 181, 154, 0.35);
  border-radius: 8px;
  background: rgba(239, 230, 212, 0.08);
  color: #efe6d4;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.rotation-ring-btn:hover:not(:disabled) {
  border-color: #d8a433;
  color: #d8a433;
}

.rotation-ring-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.rotation-ring-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.rotation-ring-btn[data-delta="1"] svg {
  transform: rotate(180deg);
}

.rotation-rings-readout {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.rotation-rings-readout-slot {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 8px;
  border-radius: 8px;
  background: rgba(18, 16, 14, 0.78);
  border: 1px solid rgba(196, 181, 154, 0.22);
  color: #efe6d4;
  text-align: center;
}

.rotation-rings-readout-slot span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(239, 230, 212, 0.62);
}

.rotation-rings-preview.is-wrong .rotation-rings-hub,
.preview-status.is-wrong {
  border-color: rgba(196, 92, 62, 0.7);
}

.rotation-rings-preview.is-wrong .rotation-rings-hub {
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(196, 92, 62, 0.35);
}

.whale-glyph::before {
  width: 16px;
  height: 9px;
  background: #9eb6c4;
  border-radius: 60% 60% 50% 50%;
  box-shadow: 6px 1px 0 -2px #9eb6c4;
}

.ring-symbol-glyph {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2f2923;
  border: 1px solid rgba(216, 203, 176, 0.55);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.ring-symbol-glyph.sheet-glyph {
  background-color: rgba(20, 16, 12, 0.92);
  background-repeat: no-repeat;
  border: 0;
}

.ring-symbol-glyph.sheet-glyph::before,
.ring-symbol-glyph.sheet-glyph::after {
  content: none;
}

.ring-symbol-glyph::before,
.ring-symbol-glyph::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
}

.wolf-glyph::before {
  width: 14px;
  height: 10px;
  border-radius: 40% 40% 30% 30%;
  background: #cfc3ad;
  box-shadow: -6px 2px 0 -2px #cfc3ad, 6px 2px 0 -2px #cfc3ad;
}

.bear-glyph::before {
  width: 14px;
  height: 12px;
  border-radius: 45%;
  background: #b9a88c;
  box-shadow: -7px -2px 0 -3px #b9a88c, 7px -2px 0 -3px #b9a88c;
}

.moth-glyph::before {
  width: 18px;
  height: 10px;
  border-radius: 50% 50% 40% 40%;
  background: #d8cbb0;
  box-shadow: inset 0 0 0 1px rgba(42, 36, 30, 0.25);
}

.moth-glyph::after {
  width: 3px;
  height: 12px;
  background: #8f7f64;
}

.owl-glyph::before {
  width: 12px;
  height: 14px;
  border-radius: 50%;
  background: #d2c4a8;
  box-shadow: inset -3px 0 0 #2f2923, inset 3px 0 0 #2f2923;
}

.dragon-glyph::before {
  width: 16px;
  height: 10px;
  background: #d8a433;
  clip-path: polygon(0 60%, 35% 20%, 55% 45%, 80% 10%, 100% 55%, 70% 100%, 35% 85%);
}

.fox-glyph::before {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid #d4a574;
}

.snake-glyph::before {
  width: 16px;
  height: 8px;
  border-radius: 999px;
  border: 2px solid #9fbf7a;
  border-left-color: transparent;
  transform: rotate(-20deg);
}

.hawk-glyph::before {
  width: 16px;
  height: 8px;
  background: #c4b59a;
  clip-path: polygon(0 70%, 50% 0, 100% 70%, 70% 70%, 50% 100%, 30% 70%);
}

.default-ring-glyph {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #efe6d4;
}

.rotation-rings-preview.is-solved .rotation-rings-door {
  box-shadow:
    inset 0 0 0 2px rgba(216, 164, 51, 0.35),
    0 0 28px rgba(216, 164, 51, 0.22);
}

.rotation-rings-preview.is-solved .rotation-rings-hub {
  color: #f5d889;
}

.rotation-rings-preview.is-solved .rotation-rings-hit,
.rotation-rings-preview.is-solved .rotation-rings-claw-toggle,
.rotation-rings-preview.is-solved .rotation-rings-claw-stage {
  pointer-events: none;
}

.rotation-rings-preview.is-solved .rotation-rings-markers,
.rotation-rings-preview.is-solved .rotation-ring-symbol {
  opacity: 0;
  visibility: hidden;
}

.rotation-rings-preview.is-solved .rotation-rings-gear-layer,
.rotation-rings-preview.is-solved .rotation-ring-disc {
  transition: none;
}

/* Outer & inner: left (CCW). Middle: right (CW). */
.rotation-rings-preview.is-solved .rotation-rings-gear-layer.is-outer,
.rotation-rings-preview.is-solved .rotation-ring.is-outer .rotation-ring-disc {
  animation: rotation-rings-spin-ccw 7.5s linear infinite;
}

.rotation-rings-preview.is-solved .rotation-rings-gear-layer.is-middle,
.rotation-rings-preview.is-solved .rotation-ring.is-middle .rotation-ring-disc {
  animation: rotation-rings-spin-cw 5.5s linear infinite;
}

.rotation-rings-preview.is-solved .rotation-rings-gear-layer.is-inner,
.rotation-rings-preview.is-solved .rotation-ring.is-inner .rotation-ring-disc {
  animation: rotation-rings-spin-ccw 4s linear infinite;
}

@keyframes rotation-rings-spin-ccw {
  from { transform: rotate(var(--ring-rotation, 0deg)); }
  to { transform: rotate(calc(var(--ring-rotation, 0deg) - 360deg)); }
}

@keyframes rotation-rings-spin-cw {
  from { transform: rotate(var(--ring-rotation, 0deg)); }
  to { transform: rotate(calc(var(--ring-rotation, 0deg) + 360deg)); }
}

.rotation-rings-preview > .rotation-rings-reset {
  justify-self: start;
  min-height: 38px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2a2116;
  border: 1px solid #c9a24a;
  border-radius: 9px;
  background:
    linear-gradient(180deg, #f0d58a 0%, #d4a84a 42%, #a67b2e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.65),
    inset 0 -1px 0 rgba(74, 48, 14, 0.28),
    0 2px 0 rgba(42, 30, 12, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
}

.rotation-rings-preview > .rotation-rings-reset:hover {
  color: #1f180f;
  border-color: #e0b85a;
  background:
    linear-gradient(180deg, #f7e0a0 0%, #e0b85a 42%, #b88934 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 224, 0.75),
    inset 0 -1px 0 rgba(74, 48, 14, 0.22),
    0 2px 0 rgba(42, 30, 12, 0.5),
    0 0 16px rgba(216, 164, 51, 0.28);
}

.rotation-rings-preview > .rotation-rings-reset:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(74, 48, 14, 0.35),
    0 1px 0 rgba(42, 30, 12, 0.45);
}

.rotation-rings-preview > .rotation-rings-reset svg {
  color: #2a2116;
  filter: drop-shadow(0 1px 0 rgba(255, 240, 200, 0.25));
}

.rotation-rings-preview > .preview-status {
  border: 1px solid rgba(201, 162, 74, 0.55);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(58, 46, 30, 0.96), rgba(28, 22, 16, 0.98));
  color: #f0d58a;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 150, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.28);
  letter-spacing: 0.02em;
}

.rotation-rings-preview > .preview-status.is-solved {
  border-color: rgba(216, 164, 51, 0.75);
  background:
    linear-gradient(180deg, #f0d58a 0%, #d4a84a 42%, #a67b2e 100%);
  color: #2a2116;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.65),
    0 2px 0 rgba(42, 30, 12, 0.45);
}

.rotation-rings-preview > .preview-status.is-wrong,
.rotation-rings-preview > .preview-status.is-failed {
  border-color: rgba(180, 90, 60, 0.65);
  background:
    linear-gradient(180deg, rgba(72, 36, 28, 0.96), rgba(36, 18, 14, 0.98));
  color: #f0b29a;
}

.rotation-rings-preview > .preview-status svg {
  color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .rotation-ring-disc,
  .rotation-rings-gear-layer {
    transition: none;
  }

  .rotation-rings-preview.is-solved .rotation-rings-gear-layer,
  .rotation-rings-preview.is-solved .rotation-ring-disc {
    animation: none;
  }
}

@media (max-width: 760px) {
  .rotation-rings-claw-row {
    grid-template-columns: 1fr;
  }

  .rotation-rings-claw-stage {
    min-height: 150px;
  }

  .rotation-rings-preview {
    min-height: 0;
  }

  .rotation-rings-scene.is-rings-only .rotation-rings-door {
    min-height: 0;
    width: min(100%, 100vw);
  }

  .rotation-rings-door {
    min-height: 0;
  }

  .rotation-rings-stack {
    width: min(100%, 92vw, 640px);
  }
}

/* --- Lockpick --- */
.lockpick-preview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 10px;
  min-height: 420px;
  padding: 14px;
  background-color: #120c08;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(180, 140, 60, 0.35);
  color: #f0e2c0;
  font-family: Georgia, "Times New Roman", serif;
}

.gameplay-mini-modal.is-in-frame .panel-body:has(.lockpick-preview) {
  container-type: size;
  display: grid;
  place-items: center;
  align-content: center;
  padding: clamp(8px, 1.6vw, 16px);
}

.gameplay-mini-modal.is-in-frame .mini-preview-surface.lockpick-preview {
  width: min(100%, calc(100cqh * 16 / 9));
  height: min(100%, calc(100cqw * 9 / 16));
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  gap: clamp(4px, 0.8cqh, 8px);
  padding: clamp(8px, 1.4cqw, 14px);
}

.lockpick-hud {
  display: none;
}

.lockpick-stage {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
}

.lockpick-housing {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  opacity: 1;
  z-index: 1;
}

.lockpick-mechanism {
  position: relative;
  z-index: 1;
  width: min(100%, 420px, 62%);
  aspect-ratio: 1 / 1;
  display: block;
  padding: 0;
  overflow: visible;
}

.lockpick-pins {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 19%;
  height: 48%;
  display: grid;
  grid-template-columns: repeat(var(--pin-count, 3), minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  z-index: 3;
  background-color: #1a2026;
  background-image: var(--chamber-plate);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.45);
}

.lockpick-pin {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  height: 100%;
  min-width: 0;
  width: 100%;
  position: relative;
  display: block;
  pointer-events: none;
}

.lockpick-pin:disabled {
  cursor: default;
}

.lockpick-chamber {
  position: absolute;
  inset: 0;
  background: transparent;
  overflow: hidden;
}

.lockpick-sweet-zone {
  position: absolute;
  left: 50%;
  width: min(72%, 2.2em);
  transform: translateX(-50%);
  bottom: calc(18% + var(--sweet-low, 0.7) * 24%);
  height: max(4px, calc((var(--sweet-high, 1) - var(--sweet-low, 0.7)) * 24%));
  border: 2px solid #3ddc84;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(20, 80, 40, 0.55), inset 0 0 8px rgba(61, 220, 132, 0.25);
  background: rgba(61, 220, 132, 0.12);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 120ms ease;
}

.lockpick-preview.is-showing-sweet .lockpick-sweet-zone {
  opacity: 1;
}

.lockpick-hit-point {
  position: absolute;
  left: 50%;
  bottom: calc(18% + var(--pin-lift, 0) * 24%);
  width: min(56%, 1.6em);
  height: 3px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: #ff3b3b;
  box-shadow:
    0 0 0 1px rgba(80, 0, 0, 0.55),
    0 0 6px rgba(255, 59, 59, 0.85);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  transition: opacity 120ms ease, bottom 40ms linear;
}

.lockpick-preview.is-showing-sweet .lockpick-hit-point {
  opacity: 1;
}

.lockpick-spring {
  display: none;
}

.lockpick-tumbler {
  position: absolute;
  left: 50%;
  bottom: calc(18% + var(--pin-lift, 0) * 24%);
  /* Box fills column; sprite height-locked so 3/4/5 match. */
  width: 100%;
  height: 88%;
  min-height: 64px;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: auto 100%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.65));
  transition: bottom 40ms linear;
  z-index: 4;
  pointer-events: none;
}

.lockpick-tumbler-head,
.lockpick-tumbler-shaft,
.lockpick-tumbler-base {
  display: none;
}

.lockpick-pin.is-set .lockpick-tumbler {
  bottom: calc(18% + 24%);
  animation: none;
}

.lockpick-pin.is-set .lockpick-spring {
  display: none;
}

.lockpick-pin.is-set .lockpick-chamber {
  box-shadow: none;
}

.lockpick-slot {
  position: absolute;
  left: 17.5%;
  right: 17.5%;
  top: 78.5%;
  height: 5%;
  margin: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.lockpick-pick {
  position: absolute;
  left: 17.2%;
  right: 16.3%;
  /* Align with housing pick channel (~81% centerline). */
  top: 78.5%;
  height: 5%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  z-index: 4;
}

.lockpick-pick:disabled {
  cursor: default;
  opacity: 0.55;
}

.lockpick-pick-hit {
  position: absolute;
  inset: -18% -4% -10%;
  z-index: 1;
}

.lockpick-pick-sprite {
  position: absolute;
  top: -90%;
  /* Tip under selected tumbler; handle extends left toward the entry slot. */
  left: calc(var(--pick-slot, 0.5) * 100%);
  width: min(160%, 520px);
  height: 300%;
  background-image: var(--lockpick-sprite);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  transform: translateX(-94%) rotate(var(--pick-angle, 0deg));
  transform-origin: 18% 58%;
  transition: left 220ms ease, transform 150ms ease, filter 120ms ease;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.65));
}

.lockpick-pick-shaft,
.lockpick-pick-hook {
  display: none;
}

.lockpick-pick.is-lifting .lockpick-pick-sprite,
.lockpick-pick.is-at-peak .lockpick-pick-sprite {
  --pick-angle: -16deg;
}

.lockpick-pick:not(:disabled):hover .lockpick-pick-sprite {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.65)) brightness(1.12);
}

.lockpick-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.lockpick-controls .button {
  min-height: 36px;
  padding: 6px 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 700;
  color: #2a2116;
  border: 1px solid #8a6a30;
  background:
    linear-gradient(180deg, #f4e4b8 0%, #d8b56a 45%, #a67b2e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.55),
    0 2px 0 rgba(42, 30, 12, 0.45);
}

.lockpick-controls .button:hover:not(:disabled) {
  filter: brightness(1.06);
}

.lockpick-controls .button:disabled {
  opacity: 0.45;
  cursor: default;
  filter: grayscale(0.25);
}

.lockpick-controls .lockpick-dev-sweet.is-active {
  border-color: rgba(61, 220, 132, 0.55);
  color: #b8f5d0;
  background: rgba(61, 220, 132, 0.12);
}

.lockpick-feedback {
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #dcc89a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  min-height: 1.1em;
}

.lockpick-preview > .preview-status {
  border: 1px solid rgba(201, 162, 74, 0.55);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(58, 46, 30, 0.96), rgba(28, 22, 16, 0.98));
  color: #f0d58a;
}

.lockpick-preview > .preview-status.is-solved {
  border-color: rgba(216, 164, 51, 0.75);
  background:
    linear-gradient(180deg, #f0d58a 0%, #d4a84a 42%, #a67b2e 100%);
  color: #2a2116;
}

.lockpick-preview > .preview-status.is-failed {
  border-color: rgba(180, 90, 60, 0.65);
  background:
    linear-gradient(180deg, rgba(72, 36, 28, 0.96), rgba(36, 18, 14, 0.98));
  color: #f0b29a;
}

.lockpick-preview.is-solved .lockpick-housing {
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 18px rgba(216, 164, 51, 0.35));
}

.lockpick-preview.is-solved .lockpick-pin,
.lockpick-preview.is-solved .lockpick-controls .button:not([data-action="mini-lockpick-reset"]) {
  pointer-events: none;
}

.gameplay-mini-modal.is-in-frame .lockpick-housing {
  width: 100%;
  height: 100%;
}

.gameplay-mini-modal.is-in-frame .lockpick-mechanism {
  width: min(100%, 380px, 62%);
  padding: 0;
}

.gameplay-mini-modal.is-in-frame .lockpick-controls .button {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 11px;
}

.gameplay-mini-modal.is-in-frame .lockpick-preview > .preview-status {
  position: absolute;
  left: clamp(8px, 1.4cqw, 14px);
  right: clamp(8px, 1.4cqw, 14px);
  bottom: clamp(8px, 1.4cqh, 14px);
  margin: 0;
}

.gameplay-mini-modal.is-in-frame .lockpick-preview.is-solved > .preview-status,
.gameplay-mini-modal.is-in-frame .lockpick-preview.is-failed > .preview-status {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .lockpick-pick-sprite,
  .lockpick-tumbler,
  .lockpick-hit-point {
    transition: none;
  }
}

@media (max-width: 760px) {
  .lockpick-preview {
    min-height: 360px;
  }

  .lockpick-controls {
    gap: 6px;
  }

  .lockpick-hud {
    font-size: 12px;
  }
}

/* --- Rotation Lockpicking --- */
.rotation-lockpick-preview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto auto;
  gap: 10px;
  min-height: 420px;
  padding: 14px;
  background-color: #0a161c;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(80, 190, 220, 0.35);
  color: #d7f6ff;
  font-family: "Manrope", "Segoe UI", sans-serif;
  user-select: none;
  touch-action: none;
}

.gameplay-mini-modal.is-in-frame .panel-body:has(.rotation-lockpick-preview) {
  container-type: size;
  display: grid;
  place-items: stretch;
  padding: 6px;
}

.gameplay-mini-modal.is-in-frame .mini-preview-surface.rotation-lockpick-preview {
  container-type: size;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  padding: 8px 10px 6px;
  gap: 6px;
  grid-template-columns: minmax(0, 1.2fr) minmax(148px, 0.82fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "stage keys"
    "stage console"
    "hud hud";
}

.gameplay-mini-modal.is-in-frame .rotation-lockpick-stage {
  grid-area: stage;
  height: 100%;
  min-height: 0;
  gap: 0;
  container-type: size;
}

.gameplay-mini-modal.is-in-frame .rotation-lockpick-dial {
  width: min(100%, 100cqh);
  height: min(100%, 100cqw);
  max-width: 280px;
  max-height: 280px;
}

.gameplay-mini-modal.is-in-frame .rotation-lockpick-keys {
  grid-area: keys;
  align-self: end;
  justify-content: flex-start;
  gap: 6px;
}

.gameplay-mini-modal.is-in-frame .rotation-lockpick-key {
  width: 42px;
  height: 42px;
}

.gameplay-mini-modal.is-in-frame .rotation-lockpick-console {
  grid-area: console;
  justify-content: flex-start;
  gap: 6px;
}

.gameplay-mini-modal.is-in-frame .rotation-lockpick-btn {
  min-width: 72px;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 10px;
}

.gameplay-mini-modal.is-in-frame .rotation-lockpick-hud {
  grid-area: hud;
  justify-content: flex-start;
  font-size: 11px;
  gap: 8px 12px;
}

.gameplay-mini-modal.is-in-frame .rotation-lockpick-feedback {
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 4;
  width: max-content;
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  pointer-events: none;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .mini-preview-surface.rotation-lockpick-preview,
.standalone-app-frame.is-vertical .gameplay-mini-modal.is-in-frame .mini-preview-surface.rotation-lockpick-preview {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "stage"
    "keys"
    "console"
    "hud";
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .rotation-lockpick-dial,
.standalone-app-frame.is-vertical .gameplay-mini-modal.is-in-frame .rotation-lockpick-dial {
  max-width: 240px;
  max-height: 240px;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .rotation-lockpick-keys,
.standalone-app-frame.is-vertical .gameplay-mini-modal.is-in-frame .rotation-lockpick-keys,
.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .rotation-lockpick-console,
.standalone-app-frame.is-vertical .gameplay-mini-modal.is-in-frame .rotation-lockpick-console,
.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .rotation-lockpick-hud,
.standalone-app-frame.is-vertical .gameplay-mini-modal.is-in-frame .rotation-lockpick-hud {
  justify-content: center;
}

.rotation-lockpick-stage {
  min-height: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
}

.rotation-lockpick-success {
  position: absolute;
  inset: 0;
  z-index: 8;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.rotation-lockpick-dial {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}

.rotation-lockpick-dial:active {
  cursor: grabbing;
}

.rotation-lockpick-dial.is-fit {
  filter: drop-shadow(0 0 14px rgba(80, 255, 210, 0.35));
}

.rotation-lockpick-housing {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.rotation-lockpick-lock {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.rotation-lockpick-lock:active {
  cursor: grabbing;
}

.rotation-lockpick-plate {
  fill: #0d1c24;
  stroke: rgba(90, 210, 240, 0.35);
  stroke-width: 1.4;
}

.rotation-lockpick-core {
  fill: #10232c;
  stroke: #7ae7ff;
  stroke-width: 1.6;
}

.rotation-lockpick-seg {
  stroke: rgba(8, 18, 22, 0.9);
  stroke-width: 0.4;
}

.rotation-lockpick-seg.is-solid {
  fill: #1c3946;
}

.rotation-lockpick-seg.is-slot {
  fill: #061016;
  stroke: #4ec8e6;
  stroke-width: 0.7;
}

.rotation-lockpick-seg.is-filled {
  fill: #2ee0c0;
}

.rotation-lockpick-ring.is-complete {
  opacity: 0.28;
}

.rotation-lockpick-ring.is-active .rotation-lockpick-seg.is-slot {
  fill: #0a2430;
  stroke: #8af0ff;
}

.rotation-lockpick-pin.is-fit rect {
  fill: #7dffd2;
}

.rotation-lockpick-pin.is-miss rect {
  fill: #ff6b6b;
}

.rotation-lockpick-lock.is-fit {
  filter: drop-shadow(0 0 14px rgba(80, 255, 210, 0.35));
}

.rotation-lockpick-console {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.rotation-lockpick-btn {
  appearance: none;
  min-width: 92px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 3px;
  font-family: Consolas, "Lucida Console", "Courier New", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b8f4ff;
  border: 2px solid #3aa7c4;
  background:
    linear-gradient(180deg, #2a5668 0%, #14323e 42%, #0a1c24 100%);
  box-shadow:
    inset 0 1px 0 rgba(180, 240, 255, 0.28),
    inset 0 -3px 0 rgba(0, 0, 0, 0.55),
    0 0 12px rgba(40, 170, 210, 0.22);
  text-shadow: 0 0 8px rgba(90, 220, 255, 0.45);
  cursor: pointer;
}

.rotation-lockpick-btn.is-slot {
  color: #06241c;
  border-color: #7dffd2;
  background:
    linear-gradient(180deg, #c8fff0 0%, #3ae0c0 38%, #127a6c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 0 rgba(0, 40, 32, 0.45),
    0 0 14px rgba(70, 255, 210, 0.35);
  text-shadow: none;
}

.rotation-lockpick-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.rotation-lockpick-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.rotation-lockpick-btn:disabled {
  opacity: 0.38;
  cursor: default;
  filter: grayscale(0.35);
}

.rotation-lockpick-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.rotation-lockpick-key {
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(120, 210, 235, 0.35);
  background: radial-gradient(circle at 50% 40%, #16323d, #0c1c23);
  cursor: pointer;
}

.rotation-lockpick-key.is-selected {
  border-color: #7dffd2;
  box-shadow: 0 0 0 2px rgba(125, 255, 210, 0.35);
}

.rotation-lockpick-key.is-used,
.rotation-lockpick-key:disabled {
  opacity: 0.28;
  cursor: default;
}

.rotation-lockpick-key-glyph {
  width: 100%;
  height: 100%;
}

.rotation-lockpick-key-glyph circle {
  fill: none;
  stroke: #7ec9dc;
  stroke-width: 2;
}

.rotation-lockpick-key-glyph rect {
  fill: #d7f6ff;
}

.rotation-lockpick-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
  font-size: 12px;
  font-family: Consolas, "Lucida Console", "Courier New", monospace;
  letter-spacing: 0.06em;
  color: #8ad8ec;
  text-shadow: 0 0 8px rgba(80, 200, 230, 0.35);
}

.rotation-lockpick-feedback {
  margin: 0;
  min-height: 1.1em;
  text-align: center;
  font-size: 13px;
  color: #9fd8e8;
}

.gameplay-mini-modal.is-in-frame .rotation-lockpick-preview > .preview-status {
  position: absolute;
  left: clamp(8px, 1.4cqw, 14px);
  right: clamp(8px, 1.4cqw, 14px);
  bottom: clamp(8px, 1.4cqh, 14px);
  margin: 0;
  z-index: 9;
}

.rotation-lockpick-preview.is-solved .rotation-lockpick-core {
  fill: #2ee0c0;
}

.rotation-lockpick-preview.is-solved .rotation-lockpick-stage,
.rotation-lockpick-preview.is-solved .rotation-lockpick-console,
.rotation-lockpick-preview.is-solved .rotation-lockpick-keys,
.rotation-lockpick-preview.is-solved .rotation-lockpick-hud,
.rotation-lockpick-preview.is-solved .rotation-lockpick-feedback {
  visibility: hidden;
}

@media (max-width: 760px) {
  .rotation-lockpick-preview {
    min-height: 360px;
    padding: 10px;
  }

  .rotation-lockpick-dial {
    width: min(100%, 280px);
  }
}

.digital-lockpicking-preview {
  position: relative;
  min-height: 520px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  background-color: var(--ck-app-bg, #050505);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ck-muted, #d3d0cc) 28%, transparent);
  color: var(--ck-text, #fffdf8);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  user-select: none;
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--ck-app-bg, #000) 42%, transparent);
}

.gameplay-mini-modal.is-in-frame .panel-body:has(.digital-lockpicking-preview) {
  container-type: size;
  display: grid;
  place-items: stretch;
  padding: 6px;
}

.gameplay-mini-modal.is-in-frame .mini-preview-surface.digital-lockpicking-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.digital-lockpicking-success {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 4;
}

.digital-lockpicking-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

.digital-lockpicking-preview.is-flash-bad .digital-lockpicking-veil {
  background:
    radial-gradient(
      ellipse at 50% 42%,
      color-mix(in srgb, var(--ck-settings-leave, #e24b59) 34%, transparent),
      color-mix(in srgb, var(--ck-accent, #c92f2f) 8%, transparent) 68%,
      transparent 78%
    );
  animation: digital-lockpicking-flash 0.58s ease-out;
}

.digital-lockpicking-preview.is-flash-good .digital-lockpicking-veil {
  background:
    radial-gradient(
      ellipse at 50% 42%,
      color-mix(in srgb, var(--ck-gold, #efc65c) 32%, transparent),
      color-mix(in srgb, var(--ck-gold, #efc65c) 6%, transparent) 70%,
      transparent 80%
    );
  animation: digital-lockpicking-flash 0.58s ease-out;
}

.digital-lockpicking-preview.is-failed .digital-lockpicking-veil {
  z-index: 5;
  opacity: 1;
  background:
    radial-gradient(
      ellipse at 50% 42%,
      color-mix(in srgb, var(--ck-settings-leave, #e24b59) 46%, transparent),
      color-mix(in srgb, var(--ck-accent, #c92f2f) 22%, transparent) 70%,
      color-mix(in srgb, var(--ck-settings-leave, #e24b59) 10%, transparent) 100%
    );
}

@keyframes digital-lockpicking-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes digital-lockpicking-alarm {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.4; }
}

@keyframes digital-lockpicking-alarm-light {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 1; }
}

.digital-lockpicking-device {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ck-muted, #d3d0cc) 34%, transparent);
  background: color-mix(in srgb, var(--ck-card-bg, #151517) 88%, transparent);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--ck-app-bg, #000) 42%, transparent);
  backdrop-filter: blur(6px);
}

.gameplay-mini-modal.is-in-frame .digital-lockpicking-preview {
  align-content: stretch;
  grid-template-rows: minmax(0, 1fr) auto;
}

.gameplay-mini-modal.is-in-frame .digital-lockpicking-device {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.digital-lockpicking-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.digital-lockpicking-chrome strong {
  margin-left: auto;
  font-size: 18px;
  color: var(--ck-gold, #efc65c);
}

.digital-lockpicking-lights {
  display: flex;
  gap: 6px;
}

.digital-lockpicking-lights i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ck-settings-button-bg, #1e1f20) 80%, var(--ck-app-bg, #000));
  box-shadow: inset 0 0 4px color-mix(in srgb, var(--ck-app-bg, #000) 70%, transparent);
}

.digital-lockpicking-preview.is-red .digital-lockpicking-lights i,
.digital-lockpicking-preview.is-failed .digital-lockpicking-lights i,
.digital-lockpicking-preview.is-flash-bad .digital-lockpicking-lights i {
  background: var(--ck-settings-leave, #e24b59);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ck-settings-leave, #e24b59) 70%, transparent);
}

.digital-lockpicking-preview.is-failed .digital-lockpicking-lights i {
  background: var(--ck-settings-leave, #e24b59);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ck-settings-leave, #e24b59) 70%, transparent);
}

.digital-lockpicking-preview.is-flash-good .digital-lockpicking-lights i {
  background: var(--ck-gold, #efc65c);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ck-gold, #efc65c) 70%, transparent);
}

.digital-lockpicking-lock-count b {
  color: var(--ck-text, #fffdf8);
}

.digital-lockpicking-bar-track {
  height: 6px;
  background: color-mix(in srgb, var(--ck-app-bg, #000) 55%, var(--ck-card-bg, #151517));
  border: 1px solid color-mix(in srgb, var(--ck-muted, #d3d0cc) 28%, transparent);
}

.digital-lockpicking-bar-track span {
  display: block;
  height: 100%;
  background: var(--ck-accent, #c92f2f);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ck-accent, #c92f2f) 55%, transparent);
}

.digital-lockpicking-bar-track span.is-red,
.digital-lockpicking-preview.is-red .digital-lockpicking-bar-track span {
  background: var(--ck-settings-leave, #e24b59);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ck-settings-leave, #e24b59) 70%, transparent);
}

.digital-lockpicking-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  min-height: 0;
}

.digital-lockpicking-codes {
  display: grid;
  align-content: stretch;
  grid-auto-rows: minmax(0, 1fr);
  gap: 3px;
  overflow: hidden;
  min-height: 0;
  padding: 4px;
  background: color-mix(in srgb, var(--ck-app-bg, #000) 42%, transparent);
}

.digital-lockpicking-code,
.digital-lockpicking-btn,
.digital-lockpicking-column {
  appearance: none;
  -webkit-appearance: none;
}

.digital-lockpicking-code,
.digital-lockpicking-btn {
  border: 1px solid color-mix(in srgb, var(--ck-muted, #d3d0cc) 36%, transparent);
  background: var(--ck-settings-button-bg, #1e1f20);
  color: var(--ck-settings-text, #fffdf8);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 5px 8px;
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
}

.digital-lockpicking-btn {
  min-width: 88px;
  min-height: 34px;
  padding: 6px 14px;
  text-align: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.digital-lockpicking-code:hover:not(:disabled),
.digital-lockpicking-btn:hover:not(:disabled),
.digital-lockpicking-column:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ck-accent, #c92f2f) 82%, transparent);
  color: var(--ck-accent, #c92f2f);
}

.digital-lockpicking-code:disabled,
.digital-lockpicking-btn:disabled,
.digital-lockpicking-column:disabled {
  opacity: 0.55;
  cursor: default;
}

.digital-lockpicking-scanner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.digital-lockpicking-column {
  display: grid;
  gap: 2px;
  padding: 6px 4px;
  border: 1px solid color-mix(in srgb, var(--ck-muted, #d3d0cc) 34%, transparent);
  background: var(--ck-settings-panel-bg, #050505);
  color: var(--ck-muted, #d3d0cc);
  font: inherit;
  cursor: pointer;
}

.digital-lockpicking-column span {
  display: block;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.35;
}

.digital-lockpicking-column span:nth-child(3) {
  color: var(--ck-gold, #efc65c);
  font-size: 16px;
}

.digital-lockpicking-column.is-glow {
  border-color: color-mix(in srgb, var(--ck-accent, #c92f2f) 82%, transparent);
  background: color-mix(in srgb, var(--ck-accent, #c92f2f) 18%, var(--ck-settings-panel-bg, #050505));
  box-shadow: 0 0 14px color-mix(in srgb, var(--ck-accent, #c92f2f) 45%, transparent);
  color: var(--ck-accent, #c92f2f);
  animation: digital-lockpicking-scan 0.42s ease-in-out infinite alternate;
}

.digital-lockpicking-column.is-glow span,
.digital-lockpicking-column.is-glow span:nth-child(3) {
  color: inherit;
}

.digital-lockpicking-column.is-locked {
  border-color: color-mix(in srgb, var(--ck-gold, #efc65c) 70%, transparent);
  background: color-mix(in srgb, var(--ck-gold, #efc65c) 14%, var(--ck-settings-panel-bg, #050505));
  color: var(--ck-gold, #efc65c);
}

.digital-lockpicking-solution {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.digital-lockpicking-solution span {
  display: grid;
  place-items: center;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--ck-gold, #efc65c) 28%, transparent);
  background: var(--ck-settings-panel-bg, #050505);
  font-size: 16px;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--ck-gold, #efc65c) 14%, transparent);
}

.digital-lockpicking-solution .is-empty {
  color: var(--ck-muted, #d3d0cc);
}

.digital-lockpicking-solution .is-set {
  color: var(--ck-gold, #efc65c);
}

.digital-lockpicking-feedback {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 12px;
  color: #8fe8b8;
}

.digital-lockpicking-preview.is-solved .digital-lockpicking-device,
.digital-lockpicking-preview.is-solved .digital-lockpicking-feedback {
  visibility: hidden;
}

@keyframes digital-lockpicking-scan {
  from { filter: brightness(1); }
  to { filter: brightness(1.28); }
}

.gameplay-mini-modal.is-in-frame .digital-lockpicking-preview > .preview-status {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 6;
}

@media (max-width: 760px) {
  .digital-lockpicking-preview {
    min-height: 360px;
    padding: 8px;
  }

  .digital-lockpicking-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .digital-lockpicking-codes {
    max-height: none;
    overflow: hidden;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: unset;
  }
}

.bypass-lockpicking-preview-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
  height: min(68vh, 560px);
}

.bypass-lockpicking-preview {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background-color: #050505;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ck-muted, #d3d0cc) 28%, transparent);
  color: #fffdf8;
  user-select: none;
  box-shadow: inset 0 0 0 999px color-mix(in srgb, #000 42%, transparent);
}

.gameplay-mini-modal.is-in-frame .panel-body:has(.bypass-lockpicking-preview-shell) {
  container-type: size;
  display: grid;
  place-items: stretch;
  padding: 6px;
}

.gameplay-mini-modal.is-in-frame .bypass-lockpicking-preview-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.gameplay-mini-modal.is-in-frame .mini-preview-surface.bypass-lockpicking-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: 8px;
  padding: 8px 12px;
}

.bypass-lockpicking-success {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 4;
}

.bypass-lockpicking-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.bypass-lockpicking-preview.is-failed .bypass-lockpicking-veil,
.bypass-lockpicking-preview.is-hit .bypass-lockpicking-veil {
  background: color-mix(in srgb, #e02424 28%, transparent);
}

.bypass-lockpicking-stage {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: stretch;
}

.bypass-lockpicking-stage canvas {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.gameplay-mini-modal.is-in-frame .bypass-lockpicking-preview {
  min-height: 0;
}

.gameplay-mini-modal.is-in-frame .bypass-lockpicking-stage canvas {
  height: 100%;
}

.bypass-lockpicking-pad {
  position: relative;
  z-index: 3;
  display: grid;
  align-self: center;
  justify-self: end;
  margin-right: 8px;
}

.bypass-lockpicking-pad button {
  width: 72px;
  height: 72px;
  border: 1px solid color-mix(in srgb, var(--bypass-frame, #1b4f78) 70%, var(--bypass-player, #7ec8ea));
  background: var(--bypass-panel, #0b2236);
  color: var(--bypass-player, #7ec8ea);
  border-radius: 12px;
  font-size: 28px;
  cursor: pointer;
  touch-action: manipulation;
}

.bypass-lockpicking-pad button:hover,
.bypass-lockpicking-pad button:active {
  background: color-mix(in srgb, var(--bypass-panel, #123a58) 70%, var(--bypass-frame, #1b4f78));
  color: var(--bypass-glow, #d6eefc);
}

.bypass-lockpicking-preview.is-solved .bypass-lockpicking-stage {
  visibility: hidden;
}

.bypass-lockpicking-dev-reset {
  justify-self: start;
  width: max-content;
}

.mini-color-input {
  width: 72px;
  height: 36px;
  padding: 2px 4px;
  cursor: pointer;
}

.gameplay-mini-modal.is-in-frame .bypass-lockpicking-preview > .preview-status {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 6;
}

.gameplay-mini-modal.is-in-frame .bypass-lockpicking-pad button {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .bypass-lockpicking-preview {
  grid-template-columns: minmax(0, 1fr);
  padding: 6px 8px;
}

.full-gameplay-shell.is-vertical .gameplay-mini-modal.is-in-frame .bypass-lockpicking-pad button {
  width: 56px;
  height: 56px;
  font-size: 22px;
}

@media (max-width: 760px) {
  .bypass-lockpicking-preview-shell {
    height: min(58vh, 420px);
  }

  .bypass-lockpicking-preview {
    padding: 8px 10px;
    gap: 8px;
  }

  .bypass-lockpicking-pad button {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }
}

.weight-object em {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--charcoal);
  color: #fffdf8;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 22px;
  color: var(--muted);
  background: rgba(255, 253, 248, 0.62);
}

.empty-state.compact {
  padding: 10px 12px;
  font-size: 13px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(20px);
  width: min(760px, calc(100vw - 28px));
  max-height: min(58vh, 520px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  background: var(--charcoal);
  color: #fffdf8;
  border-radius: 8px;
  padding: 12px 12px 12px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 50;
  box-shadow: var(--shadow);
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast.is-error {
  background: #3b151f;
  border: 1px solid rgba(255, 253, 248, 0.18);
}

.toast-content {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.toast-message {
  font-weight: 720;
  line-height: 1.35;
}

.toast-details {
  max-height: 360px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(255, 253, 248, 0.1);
  color: rgba(255, 253, 248, 0.92);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.toast-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fffdf8;
}

.toast-close:hover,
.toast-close:focus-visible {
  background: rgba(255, 253, 248, 0.14);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(39, 37, 35, 0.46);
}

.modal {
  width: min(820px, 100%);
  max-height: calc(100vh - 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(39, 37, 35, 0.28);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.modal > .panel-body {
  min-height: 0;
  overflow: auto;
  align-content: start;
}

.gameplay-mini-modal > .panel-body {
  display: block;
}

.modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  justify-content: flex-end;
  margin: 0 -16px -16px;
  padding: 12px 16px 16px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.78), var(--panel) 34%);
  border-top: 1px solid rgba(219, 209, 193, 0.72);
}

.room-flow-modal {
  width: min(1080px, 96vw);
  max-height: 88vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.room-flow-modal .panel-body {
  min-height: 0;
}

.room-flow-scroll {
  width: 100%;
  max-height: min(640px, 68vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(247, 243, 235, 0.92)),
    repeating-linear-gradient(0deg, rgba(32, 35, 38, 0.04) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(32, 35, 38, 0.04) 0 1px, transparent 1px 28px);
}

.room-flow-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.room-flow-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.room-flow-edges marker path {
  fill: var(--accent-dark);
}

.room-flow-edge {
  fill: none;
  stroke: var(--accent-dark);
  stroke-width: 2.4;
  marker-end: url(#room-flow-arrow);
}

.room-flow-node {
  position: absolute;
  width: 132px;
  height: 132px;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 12px 24px rgba(32, 35, 38, 0.12);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
}

.room-flow-node strong {
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.room-flow-node span {
  font-size: 11px;
  font-weight: 760;
  color: var(--muted);
  text-transform: uppercase;
}

.room-flow-node.is-exit {
  border-color: rgba(139, 63, 83, 0.58);
  background: #f0dfe3;
}

.room-flow-node.is-exit span {
  color: #763448;
}

@media (max-width: 1120px) {
  .editor-layout,
  .scenario-tab-layout,
  .assets-tab-layout,
  .ai-asset-select-layout,
  .room-layout,
  .mini-detail-layout,
  .gameplay-preview-layout {
    grid-template-columns: 1fr;
  }

  .room-managed-assets,
  .room-asset-manager-grid,
  .room-asset-reference-select {
    grid-template-columns: 1fr;
  }

  .item-managed-asset-card,
  .active-place-managed-asset-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .item-managed-asset-card > .room-managed-asset-head,
  .active-place-managed-asset-card > .room-managed-asset-head {
    grid-column: 1;
    grid-row: 2;
  }

  .item-managed-asset-card > .room-managed-asset-thumb,
  .item-managed-asset-card > .room-managed-asset-placeholder,
  .active-place-managed-asset-card > .room-managed-asset-thumb,
  .active-place-managed-asset-card > .room-managed-asset-placeholder {
    grid-column: 1;
    grid-row: 1;
    width: min(250px, 100%);
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 14px;
  }

  .side-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-button {
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    min-height: 58px;
    font-size: 12px;
  }

  .weight-balance-item-row {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .weight-balance-item-actions {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .sidebar-footer {
    display: none;
  }

  .topbar {
    position: static;
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  .screen {
    padding: 18px 16px 32px;
  }

  .screen-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-grid,
  .dialogue-grid,
  .hotspot-grid,
  .upload-strip,
  .game-identity,
  .mini-asset-row,
  .detail-asset-preview,
  .inline-form,
  .gameplay-zoom-panel {
    grid-template-columns: 1fr;
  }

  .gameplay-frame,
  .gameplay-frame img,
  .gameplay-frame video {
    min-height: 430px;
  }

  .painting-pair,
  .hanoi-board {
    grid-template-columns: 1fr;
  }

  .pipe-board-shell {
    min-height: 220px;
  }

  .scale-beam {
    width: 100%;
  }

  .scale-pan {
    width: 138px;
  }

  .full-dialogue-content {
    bottom: 64px;
  }

  .full-dialogue-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }

  .full-dialogue-card .persona-avatar {
    width: 96px;
    height: 192px;
  }

  .full-dialogue-persona strong {
    max-width: 96px;
    font-size: 12px;
  }

  .gameplay-dot span {
    display: none;
  }

  .compact-select {
    width: 100%;
  }

  .switch-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .logic-switch {
    min-height: 0;
  }

  .switch-pattern-toggle {
    min-height: 40px;
    font-size: 12px;
  }

  .game-card {
    min-height: 0;
  }
}

/* Gameplay mobile/runtime polish */
.full-gameplay-shell,
.full-gameplay-shell *,
.standalone-app-frame,
.standalone-app-frame * {
  -webkit-tap-highlight-color: transparent;
}

.full-gameplay-shell {
  -webkit-touch-callout: none;
}

.full-gameplay-shell,
.standalone-app-frame {
  position: relative;
}

.no-exit-black-transition {
  position: absolute;
  inset: 0;
  z-index: 100000;
  pointer-events: auto;
  background: #000;
  opacity: 0;
  transition: opacity var(--black-transition-half-ms, 500ms) ease;
}

.no-exit-black-transition.is-visible {
  opacity: 1;
}

body > .no-exit-black-transition {
  position: fixed;
  z-index: 2147483000;
}

.full-dialogue-content,
.full-room-ui-overlay .full-dialogue-content {
  transform: translateY(-10px);
}

.full-room-exit-fade {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  background: var(--ck-app-bg, #050505);
  animation: fullRoomExitFade 1s ease forwards;
}

@keyframes fullRoomExitFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.full-gameplay-shell.is-vertical .gameplay-popup-close {
  top: -19px;
  left: auto;
  right: -19px;
}

.gameplay-popup-frame.is-mini.is-pipe-mini {
  width: min(960px, calc(100% - 24px));
  height: min(660px, calc(100% - 28px));
}

.gameplay-popup-frame.is-mini.is-pipe-mini > .gameplay-mini-modal.is-in-frame,
.gameplay-popup-frame.is-mini.is-pipe-mini .panel-body {
  height: 100%;
}

.gameplay-popup-frame.is-mini.is-pipe-mini .panel-body {
  padding: clamp(6px, 1vw, 12px);
}

.gameplay-popup-frame.is-mini.is-pipe-mini .pipe-plumber-preview,
.gameplay-popup-frame.is-mini.is-pipe-mini .laser-mirror-preview {
  height: 100%;
  min-height: 0;
}

.gameplay-popup-frame.is-mini.is-pipe-mini .pipe-board-shell {
  min-height: 0;
}

.full-gameplay-shell.is-vertical .gameplay-popup-frame.is-mini.is-pipe-mini {
  width: calc(100% - 18px);
  height: calc(100% - 32px);
}

.full-video-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  background: #050505;
  pointer-events: none;
}

.full-gameplay-stage.is-mobile-video-loading .full-video-loading-overlay {
  display: grid;
}

.full-video-spinner {
  width: 46px;
  height: 46px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  animation: fullVideoSpinner 0.82s linear infinite;
}

@keyframes fullVideoSpinner {
  to { transform: rotate(360deg); }
}

/* Mini-games should use the whole in-frame overlay now that the bottom HUD is hidden. */
.gameplay-modal-backdrop.is-in-frame {
  container-type: size;
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vw, 18px);
  overflow: hidden;
}

.gameplay-modal-backdrop.is-in-frame .gameplay-popup-frame.is-mini {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}

.gameplay-modal-backdrop.is-in-frame .gameplay-popup-frame.is-mini > .gameplay-popup-close {
  top: 8px;
  right: 8px;
  left: auto;
}

.gameplay-modal-backdrop.is-in-frame .gameplay-popup-frame.is-mini > .gameplay-mini-modal.is-in-frame,
.gameplay-modal-backdrop.is-in-frame .gameplay-mini-modal.is-in-frame,
.gameplay-modal-backdrop.is-in-frame .gameplay-mini-modal.is-in-frame > .panel-body {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}

.gameplay-modal-backdrop.is-in-frame .gameplay-mini-modal.is-in-frame > .panel-body {
  display: grid;
  place-items: stretch;
  align-content: stretch;
  padding: clamp(6px, 1.8cqw, 14px);
  overflow: hidden;
}

.gameplay-modal-backdrop.is-in-frame .mini-preview-surface {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.gameplay-modal-backdrop.is-in-frame .safe-preview,
.gameplay-modal-backdrop.is-in-frame .cipher-preview,
.gameplay-modal-backdrop.is-in-frame .pattern-preview,
.gameplay-modal-backdrop.is-in-frame .audio-preview,
.gameplay-modal-backdrop.is-in-frame .logic-preview,
.gameplay-modal-backdrop.is-in-frame .circuit-match-preview,
.gameplay-modal-backdrop.is-in-frame .simple-memo-preview,
.gameplay-modal-backdrop.is-in-frame .construction-preview-shell,
.gameplay-modal-backdrop.is-in-frame .construction-preview,
.gameplay-modal-backdrop.is-in-frame .jigsaw-preview,
.gameplay-modal-backdrop.is-in-frame .button-selection-preview,
.gameplay-modal-backdrop.is-in-frame .clue-solving-preview-shell,
.gameplay-modal-backdrop.is-in-frame .clue-solving-preview,
.gameplay-modal-backdrop.is-in-frame .simon-says-preview,
.gameplay-modal-backdrop.is-in-frame .number-keylock-preview,
.gameplay-modal-backdrop.is-in-frame .gear-cog-preview,
.gameplay-modal-backdrop.is-in-frame .spot-difference-preview,
.gameplay-modal-backdrop.is-in-frame .pipe-plumber-preview,
.gameplay-modal-backdrop.is-in-frame .laser-mirror-preview,
.gameplay-modal-backdrop.is-in-frame .decryption-preview,
.gameplay-modal-backdrop.is-in-frame .moving-blocks-preview,
.gameplay-modal-backdrop.is-in-frame .hanoi-preview,
.gameplay-modal-backdrop.is-in-frame .safe-lock-preview-shell,
.gameplay-modal-backdrop.is-in-frame .safe-lock-preview,
.gameplay-modal-backdrop.is-in-frame .weight-balance-preview,
.gameplay-modal-backdrop.is-in-frame .rotation-rings-preview,
.gameplay-modal-backdrop.is-in-frame .lockpick-preview,
.gameplay-modal-backdrop.is-in-frame .rotation-lockpick-preview,
.gameplay-modal-backdrop.is-in-frame .digital-lockpicking-preview,
.gameplay-modal-backdrop.is-in-frame .bypass-lockpicking-preview-shell,
.gameplay-modal-backdrop.is-in-frame .bypass-lockpicking-preview {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.gameplay-modal-backdrop.is-in-frame .hanoi-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  justify-content: stretch;
  padding: 0;
  gap: 0;
}

.gameplay-modal-backdrop.is-in-frame .hanoi-board {
  width: 100%;
  height: 100%;
  min-height: 0;
  background-size: cover;
  background-position: center;
}

.gameplay-modal-backdrop.is-in-frame .weight-balance-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  justify-content: stretch;
}

.gameplay-modal-backdrop.is-in-frame .weight-balance-preview .scale-scene {
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  align-self: stretch;
  justify-self: stretch;
  padding: 0 12px 12px;
  place-items: start center;
  align-content: start;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.gameplay-modal-backdrop.is-in-frame .safe-door,
.gameplay-modal-backdrop.is-in-frame .cipher-scene,
.gameplay-modal-backdrop.is-in-frame .pattern-frame,
.gameplay-modal-backdrop.is-in-frame .pattern-grid,
.gameplay-modal-backdrop.is-in-frame .jigsaw-board,
.gameplay-modal-backdrop.is-in-frame .button-selection-board,
.gameplay-modal-backdrop.is-in-frame .button-selection-image-stage,
.gameplay-modal-backdrop.is-in-frame .circuit-match-board,
.gameplay-modal-backdrop.is-in-frame .simple-memo-board,
.gameplay-modal-backdrop.is-in-frame .construction-bench,
.gameplay-modal-backdrop.is-in-frame .number-keylock-face,
.gameplay-modal-backdrop.is-in-frame .gear-machine,
.gameplay-modal-backdrop.is-in-frame .painting-pair,
.gameplay-modal-backdrop.is-in-frame .pipe-board-shell,
.gameplay-modal-backdrop.is-in-frame .hanoi-board,
.gameplay-modal-backdrop.is-in-frame .scale-scene,
.gameplay-modal-backdrop.is-in-frame .rotation-rings-scene,
.gameplay-modal-backdrop.is-in-frame .lockpick-stage,
.gameplay-modal-backdrop.is-in-frame .rotation-lockpick-stage {
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}

.gameplay-modal-backdrop.is-in-frame .simple-memo-board {
  box-sizing: border-box;
  padding: clamp(24px, 5.5cqmin, 48px) clamp(28px, 6.5cqmin, 56px);
  gap: clamp(4px, 1.2cqmin, 8px);
}

.gameplay-modal-backdrop.is-in-frame .panel-body:has(.construction-preview) {
  container-type: size;
  overflow: hidden;
}

.gameplay-modal-backdrop.is-in-frame .construction-preview-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.gameplay-modal-backdrop.is-in-frame .construction-preview {
  min-height: 0;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
}

.gameplay-modal-backdrop.is-in-frame .construction-preview.is-solved,
.gameplay-mini-modal.is-in-frame .construction-preview.is-solved {
  place-items: stretch;
}

.gameplay-modal-backdrop.is-in-frame .construction-success,
.gameplay-mini-modal.is-in-frame .construction-success {
  min-height: 0;
}

.gameplay-modal-backdrop.is-in-frame .construction-bench {
  width: min(100%, calc(100cqh * 1000 / 620));
  height: min(100%, calc(100cqw * 620 / 1000));
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: 1000 / 620;
}

.gameplay-modal-backdrop.is-in-frame .construction-stage {
  width: 100%;
  height: 100%;
  max-height: none;
}

.full-gameplay-shell.is-horizontal .gameplay-modal-backdrop.is-in-frame .gameplay-popup-frame.is-mini,
.standalone-app-frame.is-horizontal .gameplay-modal-backdrop.is-in-frame .gameplay-popup-frame.is-mini,
body.standalone-preview-body.is-standalone-fullscreen .standalone-app-frame.is-horizontal .gameplay-modal-backdrop.is-in-frame .gameplay-popup-frame.is-mini {
  width: 100%;
  height: 100%;
  margin-top: 0;
  translate: 0;
}

.full-gameplay-shell.is-vertical .gameplay-modal-backdrop.is-in-frame .gameplay-popup-frame.is-mini,
.standalone-app-frame.is-vertical .gameplay-modal-backdrop.is-in-frame .gameplay-popup-frame.is-mini {
  width: 100%;
  height: 100%;
}

/* Gameplay menu V3C */
.gameplay-popup-frame.is-settings:has(.is-game-menu-v3c) {
  width: min(704px, calc(100% - 18px));
  max-height: calc(100% - 18px);
  overflow: visible;
  background: linear-gradient(180deg, #343a40 0%, #15191d 88%, #1f2429 100%);
  border-radius: 16px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.86), 0 20px 58px rgba(0, 0, 0, 0.78);
}

.gameplay-popup-frame.is-settings:has(.is-game-menu-v3c) > .gameplay-popup-close {
  top: -16px;
  right: -16px;
  left: auto;
  width: 34px;
  height: 34px;
}

.gameplay-popup-frame.is-settings > .full-settings-panel.is-game-menu-v3c,
.standalone-app-frame .gameplay-popup-frame.is-settings > .full-settings-panel.is-game-menu-v3c {
  width: 100%;
  max-height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(7px, 1.4cqh, 12px);
  padding: clamp(10px, 1.9cqw, 16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: #0b0a0c;
  color: #fff;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-family: "Manrope", system-ui, sans-serif;
}

.gameplay-popup-frame.is-settings > .full-settings-panel.is-game-menu-v3c.is-restart-confirm {
  grid-template-rows: auto minmax(0, auto) auto;
  width: min(620px, 100%);
}

.is-game-menu-v3c .game-menu-header {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding-right: 42px;
}

.is-game-menu-v3c .game-menu-room-summary {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.is-game-menu-v3c .game-menu-room-name {
  color: #c9a24b;
  font-size: clamp(8px, 1.6cqh, 10px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-game-menu-v3c .game-menu-room-summary strong {
  font-family: "Staatliches", Impact, sans-serif;
  font-size: clamp(21px, 5.8cqh, 28px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.98;
  text-transform: uppercase;
}

.is-game-menu-v3c .game-menu-progress {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.is-game-menu-v3c .game-menu-progress span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.is-game-menu-v3c .game-menu-progress strong {
  font-family: "Staatliches", Impact, sans-serif;
  font-size: clamp(18px, 4.5cqh, 24px);
  font-weight: 400;
  line-height: 1;
}

.is-game-menu-v3c .game-menu-divider {
  height: 1px;
  background: rgba(201, 162, 75, 0.32);
}

.is-game-menu-v3c .game-menu-layout {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(128px, 24%, 168px);
  gap: clamp(10px, 2cqw, 16px);
  align-items: stretch;
}

.is-game-menu-v3c .game-menu-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, 1.5cqw, 10px);
}

.is-game-menu-v3c .game-menu-card {
  min-width: 0;
  min-height: clamp(65px, 14.2cqh, 90px);
  display: grid;
  align-content: space-between;
  gap: 7px;
  padding: clamp(8px, 1.6cqh, 11px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, #151517, #101012);
  color: inherit;
  font: inherit;
  text-align: left;
}

.is-game-menu-v3c button.game-menu-card {
  cursor: default;
}

.is-game-menu-v3c .game-menu-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: clamp(11px, 2.25cqh, 13px);
  font-weight: 750;
}

.is-game-menu-v3c .game-menu-card.is-static .game-menu-card-head {
  grid-template-columns: 26px minmax(0, 1fr);
}

.is-game-menu-v3c .game-menu-card-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}

.is-game-menu-v3c .game-menu-card-icon svg {
  width: 14px;
  height: 14px;
}

.is-game-menu-v3c .full-volume-mute {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
}

.is-game-menu-v3c .full-volume-mute.is-muted {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
}

.is-game-menu-v3c .game-menu-slider {
  width: 100%;
  accent-color: #c92f2f;
}

.is-game-menu-v3c .game-menu-switch {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.is-game-menu-v3c .game-menu-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.is-game-menu-v3c .game-menu-switch.is-on {
  background: #c92f2f;
}

.is-game-menu-v3c .game-menu-switch.is-on::after {
  left: 19px;
}

.is-game-menu-v3c .game-menu-language {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 750;
}

.is-game-menu-v3c .game-menu-actions {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: clamp(10px, 1.7cqw, 14px);
}

.is-game-menu-v3c .game-menu-actions.is-confirm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-left: 0;
  padding-left: 0;
}

.is-game-menu-v3c .game-menu-actions .button {
  min-height: clamp(34px, 7.2cqh, 40px);
  justify-content: center;
  margin: 0;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: clamp(11px, 2.25cqh, 13px);
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.is-game-menu-v3c .game-menu-actions .button:hover,
.is-game-menu-v3c .game-menu-actions .button:focus-visible {
  background: rgba(255, 255, 255, 0.13);
}

.is-game-menu-v3c .game-menu-actions .button.is-menu-primary {
  border-color: transparent;
  background: linear-gradient(180deg, #f0dca8, #c9a24b 55%, #a98736);
  color: #1a1408;
}

.is-game-menu-v3c .game-menu-actions .button.is-settings-restart {
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.is-game-menu-v3c .game-menu-actions .button.danger {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.is-game-menu-v3c .full-settings-confirm-text {
  max-width: 470px;
  margin: 0 auto;
}

.full-gameplay-shell.is-vertical .gameplay-popup-frame.is-settings:has(.is-game-menu-v3c),
.standalone-app-frame.is-vertical .gameplay-popup-frame.is-settings:has(.is-game-menu-v3c) {
  width: calc(100% - 18px);
}

.full-gameplay-shell.is-vertical .is-game-menu-v3c .game-menu-header,
.standalone-app-frame.is-vertical .is-game-menu-v3c .game-menu-header {
  align-items: start;
}

.full-gameplay-shell.is-vertical .is-game-menu-v3c .game-menu-layout,
.standalone-app-frame.is-vertical .is-game-menu-v3c .game-menu-layout {
  grid-template-columns: 1fr;
  overflow: auto;
}

.full-gameplay-shell.is-vertical .is-game-menu-v3c .game-menu-controls,
.standalone-app-frame.is-vertical .is-game-menu-v3c .game-menu-controls {
  grid-template-columns: 1fr;
}

.full-gameplay-shell.is-vertical .is-game-menu-v3c .game-menu-actions,
.standalone-app-frame.is-vertical .is-game-menu-v3c .game-menu-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 0 0;
}

/* Gameplay popup frame polish */
.gameplay-popup-frame,
.gameplay-popup-frame.is-item,
.gameplay-popup-frame.is-mini,
.gameplay-popup-frame.is-settings:has(.is-game-menu-v3c),
.gameplay-popup-frame.is-mini.is-pipe-mini {
  padding: 0;
  border: 1px solid rgba(201, 162, 75, 0.34);
  background: rgba(5, 5, 5, 0.82);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
}

.gameplay-popup-frame.is-settings:has(.is-game-menu-v3c) {
  background: linear-gradient(180deg, #343a40 0%, #15191d 88%, #1f2429 100%);
}

.gameplay-popup-frame.is-mini > .gameplay-mini-modal.is-in-frame,
.gameplay-popup-frame.is-tip > .gameplay-tip-panel,
.gameplay-popup-frame.is-settings > .full-settings-panel,
.gameplay-popup-frame.is-after-success-video > .full-after-success-video-panel,
.gameplay-popup-frame.is-after-success-dialogue > .full-after-success-dialogue-panel,
.gameplay-popup-frame.is-item > .full-inventory-item-panel {
  border-radius: 7px;
  box-shadow: none;
}

.gameplay-popup-close,
.gameplay-popup-frame.is-item > .gameplay-popup-close,
.full-gameplay-shell.is-vertical .gameplay-popup-frame.is-item > .gameplay-popup-close,
.standalone-app-frame .gameplay-popup-frame.is-item > .gameplay-popup-close,
.full-gameplay-shell.is-vertical .gameplay-popup-close,
.standalone-app-frame.is-vertical .gameplay-popup-close,
.standalone-app-frame.is-horizontal .gameplay-popup-frame.is-item .gameplay-popup-close,
.gameplay-modal-backdrop.is-in-frame .gameplay-popup-frame.is-mini > .gameplay-popup-close,
.gameplay-popup-frame.is-settings:has(.is-game-menu-v3c) > .gameplay-popup-close,
.full-inventory-popover > .gameplay-popup-close.is-inventory-popover {
  top: -16px;
  right: -16px;
  left: auto;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(214, 218, 224, 0.34);
  border-radius: 50%;
  background: linear-gradient(180deg, #33383d 0%, #1b1f24 100%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.gameplay-popup-close img,
.full-inventory-popover > .gameplay-popup-close.is-inventory-popover img {
  width: 42%;
  height: 42%;
  filter: brightness(0) invert(1) opacity(0.9) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.68));
}

.gameplay-popup-close:hover,
.gameplay-popup-close:focus-visible {
  background: linear-gradient(180deg, #42484f 0%, #22272d 100%);
  outline: 1px solid rgba(201, 162, 75, 0.58);
  outline-offset: 2px;
}

.gameplay-popup-close.gameplay-popup-back {
  top: 22px;
}

.gameplay-popup-close.gameplay-popup-back svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  color: #fffdf8;
}

.dialogue-kind-switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  margin: 0 0 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
}

.segmented-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.segmented-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-option.is-active {
  color: var(--text);
  background: rgba(201, 162, 75, 0.18);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 75, 0.34);
}

.flow-choice-config {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.2);
}

.flow-choice-options {
  display: grid;
  gap: 8px;
}

.flow-choice-option-row {
  display: grid;
  grid-template-columns: 34px 34px minmax(160px, 1.5fr) minmax(110px, 0.8fr) auto 34px;
  gap: 8px;
  align-items: center;
}

.flow-choice-option-row > .icon-button:first-child svg {
  transform: rotate(180deg);
}

.flow-choice-option-row .checkbox-row.compact {
  min-height: 34px;
  margin: 0;
  white-space: nowrap;
}

.flow-choice-managed-asset-card {
  min-height: 120px;
}

.full-choice-panel {
  z-index: 48;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(201, 162, 75, 0.34);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}

.full-gameplay-stage.has-flow-choice {
  position: relative;
  overflow: hidden;
}

.full-gameplay-stage.has-flow-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 32;
  background: rgba(0, 0, 0, 0.44);
  pointer-events: none;
}

.full-gameplay-stage.has-flow-choice .full-choice-panel {
  z-index: 49;
}

.full-choice-panel.is-video {
  position: absolute;
  top: 50%;
  right: clamp(18px, 5vw, 58px);
  width: min(360px, 38vw);
  max-height: min(78vh, 520px);
  overflow: auto;
  transform: translateY(-50%);
}

.full-choice-panel.is-dialogue {
  position: static;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.full-choice-options {
  display: grid;
  gap: 9px;
}

.full-choice-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(201, 162, 75, 0.28);
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, rgba(34, 38, 43, 0.88), rgba(16, 18, 22, 0.92));
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.full-choice-option:hover,
.full-choice-option:focus-visible {
  border-color: rgba(201, 162, 75, 0.62);
  outline: none;
  background: linear-gradient(180deg, rgba(48, 52, 58, 0.94), rgba(22, 24, 28, 0.96));
}

.full-choice-option.is-selected {
  color: #100e09;
  border-color: rgba(255, 227, 139, 0.9);
  background: linear-gradient(180deg, #f5d878, #c79935);
}

.full-choice-option:disabled {
  color: rgba(255, 255, 255, 0.48);
  cursor: not-allowed;
  filter: grayscale(0.55);
}

.full-choice-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: #f87171;
  font-size: 12px;
  font-weight: 900;
}

.full-choice-cost svg {
  width: 14px;
  height: 14px;
}

.full-choice-timer {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.full-choice-timer-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c91f36, #f5d878);
  animation-name: fullChoiceTimerFill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fullChoiceTimerFill {
  from { width: 0; }
  to { width: 100%; }
}

.full-dialogue-card.is-choice-dialogue-card {
  align-items: stretch;
}

.full-dialogue-choice-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.full-dialogue-choice-content > p {
  margin: 0;
}

.full-gameplay-shell.is-vertical .full-choice-panel.is-video,
.standalone-app-frame.is-vertical .full-choice-panel.is-video {
  top: auto;
  right: 50%;
  bottom: calc(var(--full-ui-scale, 0.7) * 150px);
  width: min(86vw, 420px);
  transform: translateX(50%);
}

.full-gameplay-shell.is-vertical .full-dialogue-choice-content,
.standalone-app-frame.is-vertical .full-dialogue-choice-content {
  gap: 8px;
}
.full-stage-background-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

.full-stage-background-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

.full-gameplay-stage.is-chapter-start .full-stage-content,
.full-gameplay-stage.is-chapter-summary .full-stage-content,
.full-gameplay-stage.is-chapter-summary .full-chapter-summary {
  position: relative;
  z-index: 2;
}

.full-gameplay-stage.is-chapter-start .full-stage-content p {
  display: none;
}

.full-chapter-summary {
  width: min(720px, 90%);
  margin: auto;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(201, 162, 75, 0.34);
  border-radius: 8px;
  background: rgba(6, 6, 8, 0.78);
  color: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.full-chapter-summary h2 {
  margin: 6px 0 22px;
  font-family: "Staatliches", Impact, sans-serif;
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 400;
  letter-spacing: 0;
}

.full-chapter-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.full-chapter-summary-metric {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
}

.full-chapter-summary-metric span {
  color: rgba(255, 255, 255, 0.66);
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.full-chapter-summary-metric strong {
  font-family: "Staatliches", Impact, sans-serif;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 400;
}

.full-gameplay-shell.is-vertical .full-chapter-summary-grid {
  grid-template-columns: 1fr;
}

.full-gameplay-stage.is-chapter-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
}

.full-gameplay-stage.is-chapter-summary .full-chapter-summary {
  width: 100%;
  max-width: none;
  max-height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2vh, 22px);
  padding: clamp(20px, 3vw, 30px);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(15, 17, 20, 0.96), rgba(8, 9, 11, 0.96));
}

.full-chapter-summary-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.full-chapter-summary-header.has-collectables {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 34%);
}

.full-chapter-summary-kicker {
  color: #f1c661;
  font-family: "Manrope", sans-serif;
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.full-chapter-summary h2 {
  margin: 4px 0 0;
  text-transform: uppercase;
}

.full-chapter-summary-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Manrope", sans-serif;
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 800;
  line-height: 1.45;
  text-align: right;
}

.full-chapter-summary-header-collectables {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 8px;
}

.full-chapter-summary-header-collectables .full-chapter-summary-kicker {
  text-align: right;
}

.full-chapter-header-collectables-grid {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.full-chapter-header-collectable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.full-chapter-header-collectable-icon {
  width: clamp(26px, 4vw, 38px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffd987;
  font-family: "Staatliches", Impact, sans-serif;
  font-size: 18px;
}

.full-chapter-header-collectable-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.full-chapter-header-collectable strong {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.full-chapter-summary-main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 28%);
  gap: clamp(18px, 3vw, 28px);
}

.full-chapter-summary-left {
  min-width: 0;
  display: grid;
  grid-template-rows: auto;
  align-content: start;
  gap: 18px;
  padding-right: clamp(16px, 2vw, 24px);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.full-chapter-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.full-chapter-summary-metric {
  min-height: clamp(74px, 13vh, 96px);
  border: 0;
  border-radius: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
}

.full-chapter-summary-metric:last-child {
  border-right: 0;
}

.full-chapter-summary-metric span,
.full-chapter-collectables-section h3,
.full-chapter-summary-card span {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.full-chapter-summary-metric strong,
.full-chapter-summary-card strong {
  color: #ffd987;
  font-family: "Staatliches", Impact, sans-serif;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 400;
}

.full-chapter-collectables-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.full-chapter-collectables-section h3 {
  margin: 0;
}

.full-chapter-collectables-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 12px;
  align-content: start;
  overflow: auto;
}

.full-chapter-collectable {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}

.full-chapter-collectable-icon {
  width: clamp(52px, 8vw, 74px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffd987;
  font-family: "Staatliches", Impact, sans-serif;
  font-size: 28px;
}

.full-chapter-collectable-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.full-chapter-collectable-count {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.full-chapter-summary-feature {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.full-chapter-summary-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.full-chapter-summary-feature span {
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.full-chapter-summary-side {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: clamp(14px, 3vh, 28px);
}

.full-chapter-summary-card {
  min-height: clamp(100px, 20vh, 150px);
  display: grid;
  align-content: center;
  gap: 8px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.full-chapter-summary-card em {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.full-chapter-summary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.full-chapter-summary-button {
  min-height: clamp(46px, 8vh, 58px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(58, 62, 68, 0.8), rgba(31, 34, 38, 0.92));
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 900;
  cursor: pointer;
}

.full-chapter-summary-button.is-primary {
  border-color: rgba(255, 224, 149, 0.78);
  background: linear-gradient(180deg, #f7dc8a, #b88b2e);
  color: #161310;
}

.full-gameplay-shell.is-vertical .full-gameplay-stage.is-chapter-summary {
  padding: 5%;
}

.full-gameplay-shell.is-vertical .full-chapter-summary {
  overflow: auto;
}

.full-gameplay-shell.is-vertical .full-chapter-summary-header,
.full-gameplay-shell.is-vertical .full-chapter-summary-main,
.full-gameplay-shell.is-vertical .full-chapter-summary-actions {
  grid-template-columns: 1fr;
}

.full-gameplay-shell.is-vertical .full-chapter-summary-header p {
  text-align: left;
}

.full-gameplay-shell.is-vertical .full-chapter-summary-header-collectables {
  justify-items: start;
}

.full-gameplay-shell.is-vertical .full-chapter-summary-header-collectables .full-chapter-summary-kicker {
  text-align: left;
}

.full-gameplay-shell.is-vertical .full-chapter-header-collectables-grid {
  justify-content: flex-start;
}

.full-gameplay-shell.is-vertical .full-chapter-summary-left {
  padding-right: 0;
  border-right: 0;
}

.full-gameplay-shell.is-vertical .full-chapter-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Object Finding mini-game */
.object-finding-editor {
  display: grid;
  gap: 14px;
}

.object-finding-generated-summary {
  display: grid;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(201, 162, 75, 0.34);
  background: rgba(10, 10, 10, 0.28);
}

.object-finding-generated-summary .editor-media-preview-button {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.object-finding-generated-previews {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.object-finding-warning {
  padding: 9px 11px;
  border-left: 3px solid #d69b32;
  color: #f0c878;
  background: rgba(214, 155, 50, 0.1);
  font-size: 12px;
}

.object-finding-asset-list {
  display: grid;
  gap: 8px;
}

.object-finding-required-assets {
  overflow: hidden;
}

.object-finding-required-assets > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.object-finding-required-assets > summary::-webkit-details-marker {
  display: none;
}

.object-finding-required-assets > summary::after {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.object-finding-required-assets[open] > summary {
  margin-bottom: 12px;
}

.object-finding-required-assets[open] > summary::after {
  transform: rotate(225deg);
}

.object-finding-asset-row {
  grid-template-columns: 82px minmax(0, 1fr) auto;
}

.object-finding-asset-row.is-selected {
  border-color: rgba(201, 162, 75, 0.78);
  background: rgba(201, 162, 75, 0.08);
}

.object-finding-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}

.object-finding-add-row .button {
  white-space: nowrap;
}

.object-finding-layout-preview {
  display: grid;
  gap: 6px;
}

.object-finding-layout-preview .mini-subtitle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.object-finding-layout-preview .mini-subtitle-row > span {
  color: var(--muted, #999);
  font-size: 11px;
  font-weight: 500;
}

.object-finding-layout-preview > span {
  color: var(--muted, #999);
  font-size: 11px;
}

.object-finding-layout-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--object-finding-ratio, 16 / 9);
  overflow: hidden;
  border: 1px solid rgba(201, 162, 75, 0.34);
  background: #050505;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.object-finding-layout-stage > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.object-finding-layout-object {
  position: absolute;
  display: block;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  cursor: move;
  touch-action: none;
}

.object-finding-layout-object.is-selected {
  z-index: 1000 !important;
  border-color: #f0c878;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8);
}

.object-finding-layout-object img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.object-finding-resize-handle {
  position: absolute;
  z-index: 3;
  width: 12px;
  height: 12px;
  border: 2px solid #171717;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(240, 200, 120, 0.95);
}

.object-finding-resize-handle.is-nw {
  top: -7px;
  left: -7px;
  cursor: nwse-resize;
}

.object-finding-resize-handle.is-ne {
  top: -7px;
  right: -7px;
  cursor: nesw-resize;
}

.object-finding-resize-handle.is-sw {
  bottom: -7px;
  left: -7px;
  cursor: nesw-resize;
}

.object-finding-resize-handle.is-se {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.object-finding-generated-preview {
  display: grid;
  gap: 4px;
}

.object-finding-generated-preview > span {
  color: var(--muted, #999);
  font-size: 11px;
}

.object-finding-generated-meta {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.object-finding-generated-meta > span {
  color: var(--muted, #999);
  font-size: 12px;
}

.object-finding-layer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.object-finding-preview {
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #050505;
  container-type: size;
}

.object-finding-preview.has-silhouette-bar {
  grid-template-columns: clamp(96px, 18%, 190px) minmax(0, 1fr);
  gap: clamp(8px, 1.4cqw, 18px);
  padding: clamp(7px, 1.1cqw, 14px);
}

.object-finding-stage-slot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

.object-finding-preview.has-silhouette-bar .object-finding-stage-slot {
  place-items: start;
}

.object-finding-silhouette-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: clamp(2px, 0.35cqw, 5px);
  align-content: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding-right: clamp(6px, 0.9cqw, 12px);
  box-sizing: border-box;
  overflow: hidden;
  border-right: 1px solid rgba(201, 162, 75, 0.34);
  background: rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.object-finding-silhouette {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0.78;
  transform: scale(1);
}

.object-finding-silhouette img {
  position: static;
  display: block;
  width: min(68%, 54px);
  height: min(68%, 54px);
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(0.72);
  transition: filter 300ms ease;
}

.object-finding-silhouette.is-found {
  opacity: 1;
}

.object-finding-silhouette.is-found img {
  filter: grayscale(0) brightness(1) invert(0);
}

.object-finding-silhouette.is-empty {
  visibility: hidden;
}

.object-finding-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--object-finding-ratio, 16 / 9);
  overflow: hidden;
  background: #050505;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transform-origin: center;
  transition: transform 80ms linear;
}

@supports (width: 1cqw) {
  .object-finding-stage {
    width: min(100cqw, calc(100cqh * var(--object-finding-aspect, 1.777778)));
    height: min(100cqh, calc(100cqw / var(--object-finding-aspect, 1.777778)));
  }
}

.object-finding-add-objects {
  justify-self: start;
  margin-top: 4px;
}

.hidden-object-generate-boards {
  background: #c66b28;
  border-color: #df8741;
}

.hidden-object-board-actions {
  flex-direction: column;
  align-items: stretch;
}

.hidden-object-board-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.hidden-object-board-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hidden-object-board-row-main > div:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.hidden-object-board-row-main span {
  color: var(--muted);
  font-size: 12px;
}

.hidden-object-board-thumbnail {
  display: grid;
  place-items: center;
  flex: 0 0 120px;
  width: 120px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: #121212;
}

.hidden-object-board-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hidden-object-board-row-actions {
  justify-content: flex-end;
}

.hidden-object-board-quick-preview-section {
  display: grid;
  gap: 10px;
}

.hidden-object-board-quick-preview-section .mini-subtitle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hidden-object-board-quick-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 68vh;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 75, 0.34);
  background: #050505;
}

.full-gameplay-stage.is-hidden-objects-board {
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.5vw, 18px);
  overflow: hidden;
  background: #000;
}

.full-hidden-objects-frame {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.full-hidden-objects-frame .object-finding-preview {
  width: 100%;
  height: 100%;
}

.object-finding-background,
.object-finding-object,
.object-finding-object > img,
.object-finding-hit {
  position: absolute;
}

.object-finding-background {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.object-finding-object {
  transform-origin: center;
  will-change: opacity, transform, filter;
}

.object-finding-object > img {
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.object-finding-hit {
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

@media (max-width: 760px) {
  .hidden-object-board-row {
    grid-template-columns: 1fr;
  }

  .hidden-object-board-row-actions {
    justify-content: flex-end;
  }
}

.object-finding-hit:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

.object-finding-object.is-dissolving {
  pointer-events: none;
  animation: object-finding-dissolve 620ms cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}

.gameplay-mini-modal.is-in-frame .object-finding-preview,
.gameplay-popup-frame.is-mini .object-finding-preview {
  min-height: 0;
  height: 100%;
}

@keyframes object-finding-dissolve {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }
  55% {
    opacity: 0.65;
    transform: scale(1.035);
    filter: blur(2px) brightness(1.25);
  }
  100% {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(9px) brightness(1.5);
  }
}

@media (orientation: portrait) {
  .object-finding-generated-summary {
    grid-template-columns: 1fr;
  }

  .object-finding-stage {
    width: 100%;
  }

  .object-finding-add-row {
    grid-template-columns: 1fr;
  }
}