/* Restore, the mini game (js/restore.js). A painting on the wall, its loose pieces on a tray below. */
#game {
  padding: max(10px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom)); gap: 8px; align-items: stretch;
  background: radial-gradient(90% 65% at 50% 36%, #3a161d, #0c0506 80%);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  --tier-c: #d9b45a;
}

/* ---------- the top: pieces in a row, the money, the way out ---------- */
.rs-hud { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 52px; }
.rs-money {
  grid-column: 2; font-size: clamp(1.9rem, 8vw, 2.7rem); font-weight: 700; line-height: 1; color: var(--gilt-hi);
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #7a5a1c, 0 0 26px rgba(255, 210, 74, .3);
}
.rs-streak { grid-column: 1; justify-self: start; display: flex; align-items: baseline; gap: .4em; color: var(--right-hi); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.rs-streak.on { opacity: 1; transform: none; }
.rs-streak b { font-size: clamp(1.5rem, 6.4vw, 2.1rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rs-streak span { font-size: .95rem; color: var(--muted); white-space: nowrap; }
.rs-quit { grid-column: 3; justify-self: end; padding: 8px 0 8px 10px; color: var(--muted); font-size: .95rem; }

/* how much of the quick bonus the next piece still gets */
.rs-quick { position: relative; z-index: 4; display: flex; align-items: center; gap: 10px; width: min(100%, 760px); margin: 0 auto; color: var(--muted); font-size: .86rem; }
.rs-quick span { flex: none; }
.rs-quickbar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.rs-quickbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gilt), var(--gilt-hi)); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- the stage: the painting, its plaque, the tray ---------- */
.rs-stage { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.rs-boardwrap { flex: 1; min-height: 0; width: min(100%, 860px); margin: 0 auto; display: grid; place-items: center; }
/* The frame is drawn with shadows, so the board's own box is exactly the painting. */
.rs-frame {
  position: relative;
  box-shadow: 0 0 0 3px #4b3712, 0 0 0 9px var(--gilt), 0 0 0 11px #5d4516, 0 18px 40px rgba(0, 0, 0, .6);
}
.rs-frame::after { /* the glow when a painting is whole again */
  content: ''; position: absolute; inset: -11px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 44px 8px var(--tier-c), 0 0 0 2px #fff3d0;
}
.rs-frame.lit::after { animation: rs-lit 1.5s ease-out; }
@keyframes rs-lit { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }
.rs-board { position: relative; overflow: hidden; background: #0c0806 center / 100% 100% no-repeat; }
.rs-cuts { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.rs-lines { fill: none; stroke: rgba(14, 7, 4, .5); stroke-width: 1.2; opacity: 0; transition: opacity .3s; }
.rs-gap { fill: #150c09; stroke: rgba(0, 0, 0, .72); stroke-width: 2; stroke-linejoin: round; opacity: 0; transition: opacity .12s; }
.rs-stage.cut .rs-lines, .rs-stage.cut .rs-gap { opacity: 1; }
.rs-stage.whole .rs-lines, .rs-stage.whole .rs-gap { opacity: 0; }
.rs-gap.filled { display: none; }
.rs-stage.picking .rs-gap { stroke: rgba(245, 223, 157, .55); }
.rs-gap.near { fill: #2b1a12; stroke: var(--gilt-hi); stroke-width: 3; }
.rs-gap.hint { stroke: var(--right); stroke-width: 3; animation: rs-hint .7s ease-in-out 6 alternate; }
@keyframes rs-hint { from { fill: #150c09; } to { fill: #1d4a31; } }
.rs-gap.no { animation: rs-no .45s ease-out; }
@keyframes rs-no { 0% { fill: #5a1c1c; } 100% { fill: #150c09; } }
/* light running over the finished painting */
.rs-shine { position: absolute; inset: -20% -60%; pointer-events: none; opacity: 0; transform: translateX(-70%); background: linear-gradient(105deg, transparent 42%, rgba(255, 250, 230, .55) 50%, transparent 58%); }
.rs-shine.go { animation: rs-shine .8s ease-out; }
@keyframes rs-shine { 0% { opacity: 1; transform: translateX(-70%); } 100% { opacity: 1; transform: translateX(70%); } }

/* ---------- a piece ---------- */
/* A piece is placed by its middle: js sets --cx, --cy, --s and --r, nothing else moves it. */
.rs-piece {
  position: absolute; left: 0; top: 0; z-index: 10; cursor: grab; touch-action: none; will-change: transform;
  transform: translate3d(calc(var(--cx, 0px) - 50%), calc(var(--cy, 0px) - 50%), 0) scale(var(--s, 1)) rotate(var(--r, 0deg));
  transition: transform .26s var(--ease);
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .6));
}
.rs-piece.away { opacity: 0; pointer-events: none; transition: transform .26s var(--ease), opacity .2s .08s; }
.rs-piece.held { z-index: 30; cursor: grabbing; transition: transform 50ms linear; filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .55)); }
.rs-piece.sel { z-index: 20; }
.rs-piece.set { z-index: 5; pointer-events: none; cursor: default; filter: none; }
.rs-piece.snap { transition-duration: .1s; }
.rs-in { position: absolute; inset: 0; }
.rs-face { position: absolute; inset: 0; background-repeat: no-repeat; }
.rs-rim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rs-rim path { fill: none; stroke: rgba(255, 244, 214, .6); stroke-width: 1.5; stroke-linejoin: round; }
.rs-piece.sel .rs-rim path { stroke: var(--gilt-hi); stroke-width: 3; }
.rs-piece.gold .rs-rim path { stroke: #ffd24a; stroke-width: 3; }
.rs-piece.set .rs-rim path { stroke: rgba(14, 7, 4, .5); stroke-width: 1.2; }
.rs-rim.ok path { animation: rs-ok .55s ease-out; }
@keyframes rs-ok { 0% { stroke: var(--right-hi); stroke-width: 6; } 60% { stroke: var(--right); stroke-width: 4; } 100% { stroke: rgba(14, 7, 4, .5); stroke-width: 1.2; } }
.rs-x2 {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .12em .5em .06em; border-radius: 99px;
  font-size: 1rem; font-weight: 700; line-height: 1.2; color: #3b2603; background: linear-gradient(180deg, #fff3a8, #f2c230); box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
.rs-piece.set .rs-x2 { display: none; }
.rs-in.nope { animation: rs-nope .36s ease-out; }
@keyframes rs-nope { 0%, 100% { transform: none; } 20% { transform: translateX(-9px) rotate(-5deg); } 50% { transform: translateX(8px) rotate(4deg); } 80% { transform: translateX(-4px) rotate(-2deg); } }
.rs-in.nudge { animation: rs-nudge .6s ease-in-out 2; }
@keyframes rs-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-9px) scale(1.06); } }

/* ---------- words over the board ---------- */
.rs-pop { position: absolute; z-index: 45; pointer-events: none; display: flex; flex-direction: column; align-items: center; white-space: nowrap; opacity: 0; }
.rs-pop span { font-size: clamp(1.3rem, 5.4vw, 1.8rem); font-weight: 700; line-height: 1; color: var(--right-hi); text-shadow: 0 2px 0 #0e3a22, 0 0 14px rgba(0, 0, 0, .9); }
.rs-pop small { font-size: .95rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000, 0 0 10px #000; }
.rs-pop.gold span { color: #ffe27a; text-shadow: 0 2px 0 #7a5a1c, 0 0 14px rgba(0, 0, 0, .9); }
.rs-pop.gold small { color: #ffe27a; }
.rs-callout {
  position: absolute; z-index: 40; pointer-events: none; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%);
  font-size: clamp(1.5rem, 7vw, 2.4rem); font-weight: 700; color: #fff3d0; text-shadow: 0 2px 4px #000, 0 0 18px #000, 0 0 34px #000;
}
.rs-callout.gold { color: #ffe27a; }
.rs-callout.go { animation: rs-call 1.15s ease-out; }
@keyframes rs-call {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
  30% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(1); }
}

/* the medal, stamped on the corner of the frame */
.rs-medal {
  --ms: clamp(74px, 17vmin, 124px);
  position: absolute; right: calc(var(--ms) * -.2); bottom: calc(var(--ms) * -.12); width: var(--ms); height: var(--ms); z-index: 6;
  pointer-events: none; opacity: 0;
}
.rs-medal.bronze, .rs-chip.bronze { --m-hi: #ffd9b0; --m: #c97b3d; --m-lo: #74401a; --m-ink: #3a1c06; }
.rs-medal.silver, .rs-chip.silver { --m-hi: #ffffff; --m: #c3ccd6; --m-lo: #677382; --m-ink: #232a33; }
.rs-medal.gold, .rs-chip.gold { --m-hi: #fff8cf; --m: #f2c230; --m-lo: #946408; --m-ink: #3b2603; }
.rs-medal i {
  position: absolute; left: 20%; right: 20%; top: 52%; height: 66%; background: linear-gradient(180deg, #5e121b, #a3232f);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 78% 84%, 56% 100%, 56% 30%, 44% 30%, 44% 100%, 22% 84%, 0 100%);
}
.rs-medal b {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  font-size: calc(var(--ms) * .23); font-weight: 700; color: var(--m-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  background: radial-gradient(circle at 34% 28%, var(--m-hi), var(--m) 52%, var(--m-lo));
  box-shadow: inset 0 0 0 calc(var(--ms) * .035) rgba(255, 255, 255, .55), inset 0 0 0 calc(var(--ms) * .085) var(--m-lo), 0 8px 24px rgba(0, 0, 0, .65);
}
.rs-medal.go { animation: rs-stamp .36s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes rs-stamp {
  0% { opacity: 0; transform: rotate(-34deg) scale(3); }
  55% { opacity: 1; transform: rotate(-9deg) scale(.9); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}

/* the first-play hint: a ring that travels from a piece to its gap, and one line */
.rs-guide { position: absolute; inset: 0; z-index: 35; pointer-events: none; opacity: 0; transition: opacity .2s; }
.rs-guide.on { opacity: 1; }
.rs-finger { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 4px solid #fff3d0; background: rgba(255, 243, 208, .22); box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .6); }
.rs-guide p {
  position: absolute; left: 50%; transform: translate(-50%, -100%); margin: 0; white-space: nowrap; font-size: clamp(1.15rem, 4.6vw, 1.6rem); font-weight: 700;
  color: #fff3d0; text-shadow: 0 2px 4px #000, 0 0 16px #000, 0 0 30px #000;
}

/* the plaque under the frame */
.rs-plaque { position: relative; z-index: 4; flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 26px; color: var(--muted); }
.rs-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-pips { display: flex; gap: 6px; flex: none; }
.rs-pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.rs-pips i.now { background: var(--cream); box-shadow: 0 0 8px rgba(255, 243, 208, .7); }
.rs-pips i.done { background: #6b5a4c; }
.rs-pips i.bronze { background: #c97b3d; }
.rs-pips i.silver { background: #c3ccd6; }
.rs-pips i.gold { background: #f2c230; box-shadow: 0 0 8px rgba(255, 200, 60, .7); }

/* the tray the loose pieces wait on */
.rs-tray {
  position: relative; flex: none; width: min(100%, 760px); height: clamp(108px, 22vh, 176px); margin: 0 auto; border-radius: 14px;
  background: linear-gradient(180deg, #3b1a20, #2a1217);
  box-shadow: inset 0 0 0 1px rgba(217, 180, 90, .28), inset 0 10px 22px rgba(0, 0, 0, .45);
}
.rs-more { position: absolute; right: 12px; top: 8px; font-size: .95rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- the results ---------- */
.rs-results {
  position: absolute; inset: 0; z-index: 60; overflow: auto; display: flex; touch-action: pan-y;
  padding: 22px 16px max(22px, env(safe-area-inset-bottom));
  background: radial-gradient(90% 60% at 50% 32%, #4a1b22, #0f0506 82%);
}
.rs-sheet { margin: auto; width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rs-sheet h2 { margin: 0; font-size: clamp(1.6rem, 6vw, 2.1rem); font-weight: 700; }
.rs-rows { width: 100%; display: flex; flex-direction: column; }
.rs-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(217, 180, 90, .22);
  animation: rs-row .4s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i) * 170ms + 120ms);
}
@keyframes rs-row { from { opacity: 0; transform: translateX(-28px); } }
.rs-thumb { width: 56px; height: 56px; flex: none; background: #0c0806 center / cover; border: 2px solid var(--gilt); border-radius: 2px; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.rs-mid { flex: 1; min-width: 0; }
.rs-rowtitle { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-tags { display: flex; align-items: center; gap: 12px; min-height: 1.35em; margin-top: 3px; font-size: .92rem; }
.rs-chip { display: inline-flex; align-items: center; gap: .4em; color: var(--m-hi); font-weight: 700; }
.rs-chip::before {
  content: ''; width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 34% 28%, var(--m-hi), var(--m) 55%, var(--m-lo));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 1px 3px rgba(0, 0, 0, .5);
}
.rs-new, .rs-clean { color: var(--right-hi); font-weight: 700; }
.rs-pay { flex: none; font-size: 1.25rem; font-weight: 700; color: var(--gilt-hi); font-variant-numeric: tabular-nums; }
.rs-row.bonus { padding: 12px 0; }
.rs-total {
  margin-top: 6px; font-size: clamp(3.4rem, 17vw, 5.4rem); font-weight: 700; line-height: 1; color: var(--gilt-hi);
  font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 #7a5a1c, 0 0 40px rgba(255, 210, 74, .35);
}
.rs-note { margin: 0; text-align: center; font-size: 1.12rem; font-weight: 700; color: var(--gilt-hi); opacity: 0; transform: scale(.9); transition: opacity .4s .15s, transform .4s .15s cubic-bezier(.3, 1.5, .5, 1); }
.rs-sheet.paid .rs-note { opacity: 1; transform: none; }
#game .report-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; }

/* A narrow screen: the count stands over its words, so the money keeps the middle. */
@media (max-width: 520px) {
  .rs-streak { flex-direction: column; align-items: flex-start; gap: 0; }
  .rs-streak span { font-size: .8rem; line-height: 1.1; }
  .rs-tray { height: clamp(104px, 16vh, 150px); } /* four pieces across are small, so the painting gets the room */
}

/* A wide screen: the tray stands beside the painting, so the painting gets the whole height. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .rs-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 18vw, 230px); grid-template-rows: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 8px; width: min(100%, 1180px); margin: 0 auto; }
  .rs-boardwrap { grid-column: 1; grid-row: 1; width: 100%; }
  .rs-plaque { grid-column: 1; grid-row: 2; }
  .rs-tray { grid-column: 2; grid-row: 1 / 3; width: 100%; height: 100%; }
  .rs-quick { width: min(100%, 1180px); }
}

@media (prefers-reduced-motion: reduce) {
  .rs-piece, .rs-piece.away { transition: none; }
  .rs-in.nudge, .rs-gap.hint { animation: none; }
  .rs-gap.hint { fill: #1d4a31; }
}