/* Handwriting Creator page */

body {
  -webkit-user-select: none;
  user-select: none;
}

.creator-page {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 32px 220px;
  display: grid;
  gap: 30px;
}

.creator-ui {
  --creator-inner-radius: 16px;
  --creator-outer-radius-offset: 15px;
  --creator-pad-x: 64px;
  --creator-pad-top: 64px;
  --creator-pad-bottom: 88px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 920px;
  min-height: 600px;
  margin: 0 auto;
  padding: var(--creator-pad-top) var(--creator-pad-x) var(--creator-pad-bottom);
  border-radius: calc(var(--creator-inner-radius) + var(--creator-outer-radius-offset));
  overflow: hidden;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.creator-ui::before {
  display: none !important;
}

@media (max-width: 900px) {
  .creator-page {
    padding: 20px 20px 168px;
  }

  .creator-ui {
    --creator-pad-x: 24px;
    --creator-pad-top: 40px;
    --creator-pad-bottom: 76px;
    max-width: 100%;
    min-height: 610px;
  }
}

.creator-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: calc(-1 * var(--creator-pad-top)) calc(-1 * var(--creator-pad-x)) 18px;
  padding: 20px var(--creator-pad-x) 14px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.creator-topbar-actions,
.creator-topbar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.creator-action-btn {
  --creator-btn-bg: var(--panel);
  --creator-btn-border: var(--line);
  --creator-btn-color: inherit;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--creator-btn-border);
  background: var(--creator-btn-bg);
  color: var(--creator-btn-color);
  box-shadow: none;
  vertical-align: middle;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  transform: translateX(var(--creator-translate-x, 0)) translateY(0);
}

.creator-topbar-back {
  --creator-btn-bg: var(--panel);
  --creator-btn-border: var(--line);
  --creator-btn-color: inherit;
  min-width: 96px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  margin: -8px 0 0 -52px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--creator-btn-border);
  background: var(--creator-btn-bg);
  color: var(--creator-btn-color);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  transform: translateX(var(--creator-translate-x, 0)) translateY(0);
}

.creator-action-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.creator-action-icon-delete {
  -webkit-mask-image: url("/assets/icons/svg/trash.svg");
  mask-image: url("/assets/icons/svg/trash.svg");
}

.creator-action-icon-report {
  -webkit-mask-image: url("/assets/icons/svg/warning-diamond.svg");
  mask-image: url("/assets/icons/svg/warning-diamond.svg");
}

.creator-action-btn-soft {
  --creator-btn-bg: rgba(255, 255, 255, 0.72);
  --creator-btn-border: rgba(15, 23, 42, 0.08);
  --creator-btn-color: #111111;
}

.creator-action-btn-strong {
  --creator-btn-bg: rgba(203, 44, 44, 0.14);
  --creator-btn-border: rgba(203, 44, 44, 0.22);
  --creator-btn-color: #9f1239;
}

body[data-theme="dark"] .creator-action-btn-soft,
html[data-theme="dark"] body .creator-action-btn-soft {
  --creator-btn-bg: rgba(255, 255, 255, 0.12);
  --creator-btn-border: rgba(255, 255, 255, 0.12);
  --creator-btn-color: #f8fafc;
}

body[data-theme="dark"] .creator-action-btn-strong,
html[data-theme="dark"] body .creator-action-btn-strong {
  --creator-btn-bg: rgba(248, 113, 113, 0.14);
  --creator-btn-border: rgba(248, 113, 113, 0.22);
  --creator-btn-color: #fecaca;
}

.creator-topbar-status {
  margin: -8px -52px 0 auto;
  justify-content: flex-end;
}

body[data-theme="dark"] .creator-topbar,
html[data-theme="dark"] body .creator-topbar {
  background: transparent;
  border-bottom-color: transparent;
}

body[data-theme="light"] .creator-topbar,
html[data-theme="light"] body .creator-topbar {
  background: transparent;
  border-bottom-color: transparent;
}

.creator-progress-strip {
  margin: -18px calc(-1 * var(--creator-pad-x)) 18px;
  width: calc(100% + (var(--creator-pad-x) * 2));
}

.creator-progress-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.topbar-progress-count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  pointer-events: none;
}

.creator-progress-bar {
  position: relative;
  width: 100%;
  height: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.08);
}

.creator-progress-fill {
  width: 0%;
  height: 100%;
  background: #111111;
  transition: width 180ms ease;
}

body[data-theme="dark"] .creator-progress-bar,
html[data-theme="dark"] body .creator-progress-bar {
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .creator-progress-fill,
html[data-theme="dark"] body .creator-progress-fill {
  background: #ffffff;
}

body[data-theme="light"] .creator-progress-bar,
html[data-theme="light"] body .creator-progress-bar {
  background: rgba(15, 23, 42, 0.08);
}

.creator-hero {
  display: grid;
  gap: 10px;
}

.creator-grid {
  display: grid;
  flex: 1;
  width: 100%;
  margin-bottom: 18px;
  gap: 18px;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
}

.canvas-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.nav-around {
  --creator-btn-bg: var(--panel);
  --creator-btn-border: var(--line);
  --creator-btn-color: inherit;
  min-width: 96px;
  height: 44px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  margin: 0;
  position: absolute;
  bottom: 12px;
  z-index: 3;
  border: 1px solid var(--creator-btn-border);
  background: var(--creator-btn-bg);
  color: var(--creator-btn-color);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  transform: translateX(var(--creator-translate-x, 0)) translateY(0);
}

.nav-prev { left: 12px; }
.nav-clear {
  left: 50%;
  --creator-translate-x: -50%;
}
.nav-next { right: 12px; }

.nav-next,
body[data-theme="light"] .nav-next,
body.light-mode .nav-next,
html[data-theme="light"] body .nav-next {
  --creator-btn-bg: #111111;
  --creator-btn-border: #111111;
  --creator-btn-color: #ffffff;
}

body[data-theme="dark"] .nav-next,
html[data-theme="dark"] body .nav-next {
  --creator-btn-bg: #ffffff;
  --creator-btn-border: #ffffff;
  --creator-btn-color: #111111;
}

#btn-next,
#btn-next:hover,
#btn-next:active,
body[data-theme="light"] #btn-next,
body[data-theme="light"] #btn-next:hover,
body[data-theme="light"] #btn-next:active,
body.light-mode #btn-next,
body.light-mode #btn-next:hover,
body.light-mode #btn-next:active,
html[data-theme="light"] body #btn-next,
html[data-theme="light"] body #btn-next:hover,
html[data-theme="light"] body #btn-next:active {
  color: #ffffff !important;
}

#btn-next .btn-icon,
body[data-theme="light"] #btn-next .btn-icon,
body.light-mode #btn-next .btn-icon,
html[data-theme="light"] body #btn-next .btn-icon {
  filter: brightness(0) invert(1) !important;
}

body[data-theme="dark"] #btn-next,
body[data-theme="dark"] #btn-next:hover,
body[data-theme="dark"] #btn-next:active,
html[data-theme="dark"] body #btn-next,
html[data-theme="dark"] body #btn-next:hover,
html[data-theme="dark"] body #btn-next:active {
  color: #111111 !important;
}

body[data-theme="dark"] #btn-next .btn-icon,
html[data-theme="dark"] body #btn-next .btn-icon {
  filter: brightness(0) !important;
}

.start-prompt {
  display: grid;
  place-items: center;
  padding: 36px 18px;
  text-align: center;
  gap: 14px;
}

.start-prompt h2 {
  margin: 0;
}

.start-btn {
  --creator-btn-bg: var(--panel);
  --creator-btn-border: var(--line);
  --creator-btn-color: inherit;
  font-size: 18px;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid var(--creator-btn-border);
  background: var(--creator-btn-bg);
  color: var(--creator-btn-color);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.creator-page .btn:hover:not([disabled]),
.creator-page .btn:hover,
.creator-page .start-btn:hover:not([disabled]),
.creator-page .start-btn:hover {
  background: var(--creator-btn-bg, var(--panel));
  border-color: var(--creator-btn-border, var(--line));
  color: var(--creator-btn-color, inherit);
  filter: none;
  box-shadow: none;
}

.creator-topbar-back:hover,
.creator-action-btn:hover,
.nav-around:hover,
.start-btn:hover {
  background: var(--creator-btn-bg, var(--panel));
  border-color: var(--creator-btn-border, var(--line));
  color: var(--creator-btn-color, inherit);
  transform: translateX(var(--creator-translate-x, 0)) translateY(0);
  box-shadow: none;
}

.creator-topbar-back:active,
.creator-action-btn:active,
.nav-around:active,
.start-btn:active {
  transform: translateX(var(--creator-translate-x, 0)) translateY(0);
  box-shadow: none;
}

.nav-user-menu a:hover,
.nav-user-menu button:hover {
  background: transparent !important;
}

.creator-ui[hidden] { display: none !important; }

@media (max-width: 900px) {
  .creator-topbar {
    flex-direction: column;
    align-items: stretch;
    padding-top: 16px;
  }

  .creator-topbar-actions,
  .creator-topbar-status {
    justify-content: center;
  }

  .creator-topbar-status {
    margin: 0;
  }

  .creator-topbar-back {
    margin: -4px 0 0 -12px;
  }

  .topbar-progress-count {
    position: static;
    transform: none;
    min-width: 0;
    margin: -2px auto 0;
  }
}

.char-label {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.05em;
  text-align: center;
}

.progress {
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

.canvas-shell {
  position: relative;
  display: inline-block;
  border: 0;
  border-radius: 16px;
  background: transparent;
  overflow: hidden;
  width: fit-content;
  margin: 0;
  margin-top: 12px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.nav-course-label {
  display: none !important;
}

.canvas-frame {
  --canvas-display-scale: 1;
  --guide-line-color: rgba(66, 133, 244, 0.52);
  --guide-letter-color: rgba(25, 35, 56, 0.16);
  --guide-letter-offset-y: 2;
  --guide-letter-size-factor: 1;
  position: relative;
  display: block;
  background-color: rgba(255, 255, 255, 0.96);
  background-image:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(26% - 0.5px),
      var(--guide-line-color) calc(26% - 0.5px),
      var(--guide-line-color) calc(26% + 0.5px),
      transparent calc(26% + 0.5px),
      transparent calc(52% - 0.5px),
      var(--guide-line-color) calc(52% - 0.5px),
      var(--guide-line-color) calc(52% + 0.5px),
      transparent calc(52% + 0.5px),
      transparent calc(78% - 0.5px),
      var(--guide-line-color) calc(78% - 0.5px),
      var(--guide-line-color) calc(78% + 0.5px),
      transparent calc(78% + 0.5px),
      transparent 100%
    );
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}

@media (max-width: 900px) {
  .canvas-frame {
    --canvas-display-scale: 0.68;
  }
}

.canvas-frame::before {
  content: attr(data-guide-char);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Comic Neue", cursive;
  font-size: calc(178px * var(--guide-letter-size-factor) * var(--canvas-display-scale));
  line-height: 1;
  font-weight: 700;
  color: var(--guide-letter-color);
  transform: translateY(calc(var(--guide-letter-offset-y) * 1px * var(--canvas-display-scale)));
  pointer-events: none;
  z-index: 1;
  text-rendering: geometricPrecision;
}

#draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  background: transparent;
  z-index: 2;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.hint {
  color: var(--muted);
  font-size: 14px;
}

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  color: #111;
  border: 1px solid var(--accent-soft-1);
  font-size: 13px;
}

.cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.danger {
  background: linear-gradient(135deg, #f39a7a6a, #ff4e3683);
  color: #fff;
}

/* Square creator UI */
.creator-ui,
.creator-topbar,
.creator-action-btn,
.creator-topbar-back,
.nav-around,
.start-btn,
.canvas-shell,
.creator-progress-bar,
.pill,
.start-footer-social-link {
  border-radius: var(--ui-radius-sm) !important;
}
/* Pixelarticons default sizing */
body:not(#pixelarticon-size-opt-out) img[src^="/assets/icons/svg/"],
body:not(#pixelarticon-size-opt-out) img[src^="assets/icons/svg/"] {
  width: var(--pixelarticon-size, 20px) !important;
  height: var(--pixelarticon-size, 20px) !important;
  object-fit: contain;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

/* Global square-corner reset */
body:not(#corner-radius-opt-out) *,
body:not(#corner-radius-opt-out) *::before,
body:not(#corner-radius-opt-out) *::after {
  border-radius: var(--ui-radius-sm) !important;
}

body:not(#corner-radius-opt-out) img[src^="/assets/icons/"],
body:not(#corner-radius-opt-out) img[src^="assets/icons/"] {
  border-radius: 0 !important;
}