/* 線上拼圖專用樣式；按鈕、欄位沿用 site.css */
.jg-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.jg-imgs .btn { width: 100%; min-height: 48px; padding: 0 6px; }
.jg-imgs .btn[aria-pressed="true"], .jg-imgs .jg-up.on { border-color: var(--brand); background: #eff4ff; color: var(--brand); }
.jg-up { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; }
.jg-up input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.jg-set { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.jg-set > * { min-width: 0; }
.jg-set select { width: 100%; }
.jg-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.jg-bar .btn { width: 100%; padding: 0 6px; }
.jg-bar .btn[aria-pressed="true"] { border-color: var(--brand); background: #eff4ff; color: var(--brand); }
.jg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; text-align: center; }
.jg-stats div { border: 1px solid var(--line); border-radius: 10px; padding: 6px 4px; }
.jg-stats dt { color: var(--muted); font-size: .9rem; }
.jg-stats dd { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.jg-wrap { width: 100%; overflow: hidden; border-radius: 10px; background: #f1f5f9; }
.jg-stage { position: relative; transform-origin: 0 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.jg-frame { position: absolute; box-sizing: border-box; outline: 2px dashed #94a3b8; background-color: #fff; background-image: linear-gradient(to right, rgba(100,116,139,.22) 1px, transparent 1px), linear-gradient(to bottom, rgba(100,116,139,.22) 1px, transparent 1px); z-index: 0; }
.jg-frame canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.jg-ghost { opacity: 0; transition: opacity .15s; z-index: 1; }
.jg-ghost.on { opacity: .55; }
.jg-final { opacity: 0; transition: opacity .6s; z-index: 1; }
.jg-stage.done .jg-final { opacity: 1; z-index: 20; }
.jg-piece { position: absolute; touch-action: none; cursor: grab; display: block; }
.jg-piece.drag { cursor: grabbing; opacity: .93; }
.jg-piece.locked { pointer-events: none; cursor: default; }
.jg-done { background: #ecfdf5; border-left: 4px solid var(--ok); padding: 10px 14px; border-radius: 6px; font-weight: 700; }
.jg-tip { color: var(--muted); font-size: .95rem; margin: 6px 0 0; }
@media (max-width: 400px) { .jg-set { grid-template-columns: 1fr; } .jg-bar .btn { font-size: .9rem; } }
.jg-stage.done .jg-frame { z-index: 30; }
@media (max-width: 400px) { .jg-stats dd { font-size: 1.05rem; white-space: nowrap; } .jg-stats div { padding: 6px 2px; } }