* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #23262e;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  color: #eef0f4;
}

#scene-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  /* A long press on mobile is exactly our "hold to break" gesture, but
     without this the browser reads it as a text-selection/callout gesture
     and pops up its own "copy" menu instead. */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#scene-canvas:active {
  cursor: grabbing;
}

/* Fills in over the fresh wax's hold-to-break window — the wax itself stays
   deliberately still and silent through that wait, so this is the only cue
   that the press registered and is building up. Positioned at the press
   point each frame from JS; hidden the rest of the time. */
#press-progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 5;
}

#press-progress.visible {
  opacity: 1;
}

#press-progress-fill {
  transition: stroke-dashoffset 0.05s linear;
}

#ui-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: calc(100vw - 40px);
}

#quick-reset-button {
  flex-shrink: 0;
  /* Square, one side = #ui's own height when collapsed (18px padding top/bottom + 32px header). */
  width: 68px;
  height: 68px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 22, 28, 0.72);
  backdrop-filter: blur(10px);
  color: #eef0f4;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

#quick-reset-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

#ui {
  width: 260px;
  min-width: 0;
  padding: 18px;
  border-radius: 16px;
  background: rgba(20, 22, 28, 0.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  user-select: none;
}

.ui-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#ui h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#ui-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #eef0f4;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

#ui-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
}

#ui-body {
  margin-top: 14px;
}

#ui.collapsed #ui-body {
  display: none;
}

#ui section {
  margin-bottom: 16px;
}

#ui h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #9aa1ad;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.button-row {
  display: flex;
  gap: 6px;
}

.button-row button {
  flex: 1;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #eef0f4;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.button-row button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.button-row button.active {
  background: #5ec8f0;
  border-color: #5ec8f0;
  color: #10131a;
  font-weight: 600;
}

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

#color-picker {
  width: 40px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.file-button,
#remove-photo,
#reset-button {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #eef0f4;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}

.file-button:hover,
#remove-photo:not(:disabled):hover,
#reset-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

#remove-photo:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#reset-button {
  width: 100%;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
}

#volume-slider {
  width: 100%;
  accent-color: #5ec8f0;
  cursor: pointer;
}

.hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #9aa1ad;
}

#photo-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}