@import "../shared/flat-puzzle-ui.css";

:root {
  --body-background:
    radial-gradient(circle at top left, rgba(86, 145, 223, 0.24), transparent 26%),
    radial-gradient(circle at bottom right, rgba(35, 124, 110, 0.18), transparent 24%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
  --shell-width: min(1280px, calc(100vw - 32px));
  --shell-padding: 12px 0 14px;
  --shell-background: transparent;
  --stage-width: 100%;
  --stage-min-height: min(74vh, 860px);
  --viewer-min-height: min(74vh, 860px);
  --viewer-background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.88), transparent 28%),
    linear-gradient(180deg, var(--viewer-bg-top), var(--viewer-bg-bottom));
  --viewer-radius: 28px;
  --viewer-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 22px 50px var(--shadow);
  --viewer-after-display: block;
  --panel-width: 100%;
  --panel-background: var(--panel);
  --panel-border: 1px solid var(--panel-border-color);
  --panel-radius: 28px;
  --panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 22px 50px var(--shadow);
  --panel-backdrop-filter: blur(18px);
  --panel-padding: 14px 16px 16px;
  --controls-padding: 12px;
  --controls-border: 1px solid rgba(255, 255, 255, 0.08);
  --controls-radius: 16px;
  --controls-background: rgba(247, 251, 255, 0.48);
  --controls-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --stage-tools-width: min(860px, 100%);
  --swatch-radius: 10px;
  --swatch-border: 1px solid rgba(255, 255, 255, 0.55);
  --swatch-shadow: 0 4px 12px rgba(21, 35, 59, 0.12);
  --move-log-padding: 10px 12px;
  --move-log-color: var(--text-main);
  --move-log-radius: 12px;
  --move-log-background: rgba(255, 255, 255, 0.42);
  --move-log-border: 1px solid rgba(41, 65, 94, 0.08);
  --mobile-content-width: min(100vw - 20px, 1280px);
  --mobile-viewer-min-height: 68vh;
}

button {
  cursor: default;
}

.paint-swatch.is-active {
  transform: none;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 0 2px rgba(22, 124, 107, 0.18),
    0 4px 12px rgba(21, 35, 59, 0.16);
}

.counter-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.counter-meta,
.counter-label {
  font-size: 11px;
  line-height: 1.1;
}

.counter-value {
  margin-top: 0;
  font-size: 20px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .app-shell {
    padding: 10px 0 12px;
  }

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