/* ---------- finishing (appliqué) minigame ---------- */
.card.mg-finish { width: min(980px, 100%); padding: 18px; text-align: left; }
.mg-finish .fin {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(290px, 1fr); gap: 20px; align-items: stretch;
}
.mg-finish .fin-stage {
  position: relative;
  height: min(74vh, 620px);
  border-radius: 20px; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(255, 252, 245, .95), rgba(255, 252, 245, 0) 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='104' viewBox='0 0 84 104'><g fill='%23f2e5d3'><path d='M42 8c5 10 15 15 15 27 0 9-8 14-15 23-7-9-15-14-15-23 0-12 10-17 15-27z'/><path d='M42 58c3 6 9 9 9 16s-5 9-9 14c-4-5-9-7-9-14s6-10 9-16z' opacity='.7'/><circle cx='0' cy='52' r='5'/><circle cx='84' cy='52' r='5'/><circle cx='0' cy='0' r='3'/><circle cx='84' cy='0' r='3'/><circle cx='0' cy='104' r='3'/><circle cx='84' cy='104' r='3'/></g><g fill='none' stroke='%23f2e5d3' stroke-width='2.4' stroke-linecap='round'><path d='M27 36c-9-6-18 0-14 8 3 5 9 3 8-1'/><path d='M57 36c9-6 18 0 14 8-3 5-9 3-8-1'/><path d='M33 66c-6 2-9 8-5 12'/><path d='M51 66c6 2 9 8 5 12'/></g><path d='M42 22c3 5 6 8 6 13 0 4-3 7-6 10-3-3-6-6-6-10 0-5 3-8 6-13z' fill='%23f8efe2'/></svg>") 0 0 / 84px 104px,
    #f7ecdc;
  box-shadow: inset 0 0 0 2px #efe0cc, inset 0 -40px 60px -30px rgba(160, 120, 90, .18);
}
.mg-finish .fin-stage::after {
  /* a soft shadow on the floor under the form */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 3%; height: 18px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(94, 70, 63, .16), transparent); pointer-events: none;
}
.mg-finish .fin-dress { position: absolute; inset: 2% 3% 4%; z-index: 1; }
.mg-finish .fin-dress svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 8px 14px rgba(94, 70, 63, .14)); }

.mg-finish .fin-app { cursor: grab; }
.mg-finish .fin-app:active { cursor: grabbing; }
.mg-finish .fin-hit { fill: transparent; }
.mg-finish .fin-ring {
  fill: none; stroke: #c96f80; stroke-width: 1.6; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke;
  opacity: 0; transition: opacity .15s;
}
.mg-finish .fin-app.sel .fin-ring { opacity: 1; animation: fin-march 1.4s linear infinite; }
.mg-finish .fin-app.off { opacity: .45; }
.mg-finish .fin-app.off .fin-ring { stroke: #9a6b5e; }
.mg-finish .fin-art { transform-box: fill-box; transform-origin: center; }
.mg-finish .fin-art.pop { animation: fin-pin .42s cubic-bezier(.2, 1.6, .4, 1); }
.mg-finish .fin-art.poof { animation: fin-poof .26s ease-in forwards; }

.mg-finish .fin-drop {
  position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translate(-50%, 10px);
  padding: 6px 14px; border-radius: 99px; background: rgba(94, 70, 63, .82); color: #fff; font-weight: 800; font-size: 13px;
  opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none;
}
.mg-finish .fin-drop.show { opacity: 1; transform: translate(-50%, 0); }

.mg-finish .fin-side { display: flex; flex-direction: column; min-width: 0; }
.mg-finish h2 { margin: 4px 0 4px; }
.mg-finish .sub { margin: 0 0 14px; font-size: 14.5px; }
.mg-finish .fin-tray { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mg-finish .fin-tile {
  position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 16px;
  background: #fffaf3; box-shadow: 0 0 0 2px var(--line), 0 3px 0 2px var(--line);
  display: grid; place-items: center;
  touch-action: none; cursor: grab;
  transition: transform .15s, box-shadow .15s;
}
.mg-finish .fin-tile svg { width: 74%; height: 74%; pointer-events: none; overflow: visible; }
@media (hover: hover) { .mg-finish .fin-tile:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--rose), 0 4px 0 2px var(--line); } }
.mg-finish .fin-tile.lifted { opacity: .45; }
.mg-finish .fin-tile.locked { cursor: not-allowed; background: #f6eee4; }
.mg-finish .fin-tile.locked svg { filter: grayscale(1); opacity: .35; }
.mg-finish .fin-lock {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  padding: 1px 7px; border-radius: 99px; background: var(--cocoa-soft); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap;
}
.mg-finish.fin-full .fin-tile:not(.locked) { opacity: .55; }
.mg-finish .fin-count { margin: 10px 2px 0; font-size: 13px; font-weight: 800; color: var(--cocoa-soft); }

.mg-finish .fin-tools {
  margin-top: 12px; padding: 10px 12px; border-radius: 16px;
  background: #fbefe6; box-shadow: inset 0 0 0 2px #f3dccf;
  transition: opacity .2s;
}
.mg-finish .fin-tools.off { opacity: .6; }
.mg-finish .fin-sel-name { display: block; font-weight: 800; font-size: 13.5px; margin-bottom: 8px; }
.mg-finish .fin-tools.off .fin-sel-name { font-weight: 600; color: var(--cocoa-soft); }
.mg-finish .fin-tool-row { display: flex; align-items: center; gap: 8px; }
.mg-finish .fin-tool {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #fffaf3; box-shadow: 0 2px 0 var(--line); font-size: 20px; line-height: 1; font-weight: 800;
}
.mg-finish .fin-tool:disabled { cursor: default; opacity: .5; }
.mg-finish .fin-tool.del { color: var(--rose-deep); font-size: 16px; }
.mg-finish .fin-size { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--rose-deep); }
.mg-finish .fin-s-sm { font-size: 11px; }
.mg-finish .fin-s-lg { font-size: 19px; }
.mg-finish .fin-size input { flex: 1; min-width: 0; accent-color: var(--rose-deep); }
.mg-finish .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mg-finish .fin-hint { margin: 12px 2px 0; font-size: 13.5px; font-style: italic; color: var(--cocoa-soft); min-height: 1.4em; }
.mg-finish .fin-hint.warn { color: var(--rose-dark); font-style: normal; font-weight: 800; }
.mg-finish .btn-row { margin-top: auto; justify-content: flex-end; padding-top: 4px; }

.fin-ghost {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  filter: drop-shadow(2px 6px 4px rgba(94, 70, 63, .3));
}
.fin-ghost svg { width: 100%; height: 100%; display: block; overflow: visible; transition: transform .15s; transform: scale(1.15) rotate(-6deg); }
.fin-ghost.ok svg { transform: scale(1.3) rotate(0deg); }
.fin-ghost.back { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; opacity: .2; }

@keyframes fin-pin { 0% { transform: scale(1.8); opacity: 0; } 55% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fin-poof { to { transform: scale(1.6); opacity: 0; } }
@keyframes fin-march { to { stroke-dashoffset: -14; } }
.reduce-motion .mg-finish .fin-app.sel .fin-ring { animation: none; }

@media (max-width: 760px) {
  .card.mg-finish { padding: 10px; }
  .mg-finish .fin { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mg-finish .fin-stage { height: min(48vh, 420px); order: 0; }
  .mg-finish h2 { display: none; }
  .mg-finish .sub { display: none; }
  .mg-finish .fin-tray {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 56px;
    overflow-x: auto; padding: 4px 4px 8px; margin: 0 -4px; touch-action: pan-x;
  }
  .mg-finish .fin-tile { touch-action: pan-x; }
  .mg-finish .fin-count { margin-top: 2px; }
  .mg-finish .fin-tools { margin-top: 8px; padding: 8px 10px; }
  .mg-finish .fin-sel-name { margin-bottom: 6px; }
  .mg-finish .fin-hint { margin-top: 6px; text-align: center; }
  .mg-finish .btn-row { justify-content: center; }
  .mg-finish .btn-row .btn { margin-top: 8px; }
}

/* Touch screens: bigger tool buttons, and the size slider is easy to catch with a thumb. */
@media (pointer: coarse) {
  .mg-finish .fin-tool { width: 48px; height: 48px; }
  .mg-finish .fin-tool-row { gap: 10px; }
  .mg-finish .fin-size input { height: 44px; }
  .mg-finish .fin-tile { -webkit-touch-callout: none; }
}

/* short landscape phones: the dress fills the height and the appliqués pack in small tiles
   (no sliding row here: the dress is to the left, so dragging sideways must not scroll) */
@media (max-height: 500px) and (min-width: 761px) {
  .card.mg-finish { padding: 10px; }
  .mg-finish .fin { gap: 12px; }
  .mg-finish .fin-stage { height: calc(100dvh - 84px - 20px - env(safe-area-inset-top)); }
  .mg-finish h2, .mg-finish .sub { display: none; }
  .mg-finish .fin-tray { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
  .mg-finish .fin-tile { border-radius: 12px; }
  .mg-finish .fin-lock { font-size: 9.5px; padding: 0 5px; bottom: 2px; }
  .mg-finish .fin-count { margin-top: 4px; }
  .mg-finish .fin-tools { margin-top: 6px; padding: 8px 10px; }
  .mg-finish .fin-hint { margin-top: 6px; }
  .mg-finish .btn-row .btn { margin-top: 6px; }
}