.puzzle-product-menu[hidden], .puzzle-stage[hidden] { display: none !important; }
.preview-controls { position: relative; }
.puzzle-product-menu { position: fixed; z-index: 100000; width: 270px; padding: 8px; background: #fffaf4; border: 1px solid #e5d5c2; border-radius: 16px; box-shadow: 0 12px 36px #50372226; }
.puzzle-product-menu button { display: block; width: 100%; padding: 14px; border: 0; background: none; text-align: left; border-radius: 10px; color: #503822; cursor: pointer; }
.puzzle-product-menu button[aria-checked=true] { background: #f3e4ce; }
.puzzle-product-menu small { display: block; margin-top: 5px; color: #8a7562; }
.puzzle-product-menu span { float: right; }
.puzzle-stage { position: absolute; inset: 0; margin: auto; height: 90%; max-width: 92%; aspect-ratio: 900/1150; user-select: none; touch-action: none; filter: drop-shadow(0 18px 20px #49351f22); }
.puzzle-art-clip { position: absolute; left: 16.11111111%; top: 9.13043478%; width: 67.77777778%; height: 59.56521739%; overflow: hidden; background: #eee8df; cursor: grab; }
.puzzle-art, .puzzle-lines, .puzzle-overlay { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.puzzle-art { object-fit: cover; transform-origin: center; }
.puzzle-lines { pointer-events: none; z-index: 2; }
.puzzle-overlay { pointer-events: none; z-index: 3; }
.puzzle-text-layer { position:absolute; inset:0; pointer-events:none; z-index:4; }
.puzzle-text-layer svg { display:block; width:100%; height:100%; overflow:visible; }
@font-face { font-family:PuzzleCaption; src:url('/assets/fonts/blessing/MaShanZheng-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:PuzzleSans; src:url('/assets/fonts/city-memory/SourceHanSansCN-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
.puzzle-caption-editor { box-sizing:border-box; width:min(460px,calc(100vw - 32px)); padding:26px; border:1px solid #e7ded1; border-radius:20px; background:#fffdf9; color:#503e30; }
.puzzle-caption-editor::backdrop { background:#251b154d; }
.puzzle-caption-editor h2 { margin:0 0 16px; font-size:20px; }
.puzzle-caption-editor label { display:block; font-size:13px; margin-bottom:8px; }
.puzzle-caption-editor textarea { box-sizing:border-box; width:100%; min-height:96px; padding:12px; border:1px solid #d9c9b6; border-radius:10px; font:16px/1.6 sans-serif; resize:vertical; }
.puzzle-caption-editor small { display:block; margin:6px 0; color:#918171; text-align:right; }
#puzzleCaptionError { font-size:12px; color:#9c4033; }
.puzzle-caption-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; }
.puzzle-caption-suggestions button { border:1px solid #e8dfd2; border-radius:8px; padding:8px 10px; background:#faf5ee; font-size:12px; color:inherit; cursor:pointer; }
.puzzle-caption-done { width:100%; min-height:44px; border:0; border-radius:10px; background:#71553e; color:#fff; cursor:pointer; }
.puzzle-caption-done:disabled { opacity:.45; }
.puzzle-caption-entry { display:none; }
@media(max-width:850px) {
  .puzzle-caption-entry { display:grid; grid-template-columns:1fr auto; width:100%; margin-top:14px; padding:12px 0 0; border:0; border-top:1px solid #e9e0d4; background:transparent; color:#503e30; text-align:left; cursor:pointer; }
  .puzzle-caption-entry strong { font-size:13px; }
  .puzzle-caption-entry span { grid-column:1; margin-top:5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#948575; }
  .puzzle-caption-entry b { grid-column:2; grid-row:1 / 3; align-self:center; font-size:22px; font-weight:400; }
}
@media(max-width:850px) { .puzzle-caption-editor { margin:auto 0 0; width:100%; max-width:none; max-height:80dvh; border-radius:22px 22px 0 0; padding:24px 20px max(24px,env(safe-area-inset-bottom)); } }
.puzzle-product-active #frameModel { display: none !important; }
.puzzle-product-active #frameStage { perspective: none; }
.puzzle-product-active .preview-caption { opacity: 1; }
.puzzle-product-active #scenePlacementTurnLeft, .puzzle-product-active #scenePlacementTurnRight, .puzzle-product-active #scenePlacementAngleValue,
.puzzle-product-active label:has(#rotateRange) { display: none !important; }
.preview-product-arrow, .preview-product-status { display: none; }
.puzzle-making-settings[hidden], .puzzle-lines[hidden] { display: none !important; }
.puzzle-making-settings { margin: 12px 0; padding: 15px 13px; border: 1px solid #e9e0d4; border-radius: 16px; background: #fffdf9; }
.puzzle-making-settings h3 { margin: 0 0 10px; font-size: 14px; color: #503822; }
.puzzle-difficulties { display: flex; gap: 5px; }
.puzzle-confirm-cutline { margin-top:10px; padding:8px 12px; border:1px solid #baa17f; border-radius:8px; background:#faf3e8; color:#513c27; font-size:12px; cursor:pointer; }
.puzzle-confirm-cutline:disabled { opacity:.5; cursor:default; }
.puzzle-difficulties button { flex: 1; min-width: 0; min-height: 44px; padding: 7px 4px; border: 1px solid #e6ddd1; border-radius: 9px; background: #fff; color: #786859; font-size: 13px; cursor: pointer; }
.puzzle-difficulties span { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; }
.puzzle-difficulties button[aria-pressed=true] { background: #f2e6d5; color: #513c27; border-color: #a8875b; font-weight: 700; }
.puzzle-difficulties button:focus-visible { outline: 2px solid #967341; outline-offset: 2px; }
.puzzle-making-settings small { display: block; margin-top: 9px; font-size: 10px; color: #948575; }
.puzzle-making-settings .puzzle-cut-status { margin: 4px 0 0; font-size: 10px; line-height: 1.5; color: #948575; }
.puzzle-making-settings > .ai-work-purchase-primary { width:100%; min-height:44px; margin-top:14px; }
@media (max-width: 850px) {
  /* No product menu or product-name button in the H5 control grid. */
  #fitImageButton, .puzzle-product-menu { display: none !important; }
  .h5-current-preview.is-expanded .preview-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .puzzle-stage { height: 85%; max-width: 94%; }
  .preview-product-status { display: block; position: absolute; left: 14px; top: 4px; z-index: 10; font-size: 11px; line-height: 18px; font-weight: 400; color: #998875; pointer-events: none; }
  #frameStage .preview-product-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; display: grid; place-items: center; width: 48px; height: 48px; min-width: 48px; min-height: 48px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: #675849; cursor: pointer; touch-action: pan-y; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
  .preview-product-arrow.is-previous { left: 2px; }
  .preview-product-arrow.is-next { right: 2px; }
  .preview-product-arrow span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ffffffa8; border-radius: 50%; background: #ffffffa6; box-shadow: 0 2px 8px #5037220d; font-family: Arial, sans-serif; font-size: 28px; font-weight: 400; line-height: 1; }
  .preview-product-arrow:focus-visible { outline: 2px solid #8a745a; outline-offset: 1px; }
  .preview-product-arrow:active span { background: #ffffffe0; }
}