/* Win sheet, kit build (9 Oct 2026). Spec: art/kit/win/spec.md, light from the top-left, Fredoka. Scoped to #winSheet so the streak
   view (.sheet.win.daily) keeps its own look. Motion is transform and opacity only. */
#winSheet { --pw: clamp(124px, calc((100dvh - var(--sat) - var(--sab) - 640px) * .857), 172px);
  padding: calc(var(--sat) + 18px) 0 calc(var(--sab) + 16px); justify-content: center;
  background: radial-gradient(120% 70% at 50% 34%, #6B3F45, #4A2E3C 45%, #2A1F2C); }
#winSheet > * { flex-shrink: 0; }
/* backdrop: slow rays, bottom fade */
#winSheet > .kbg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#winSheet .rays { position: absolute; left: 50%; top: -170px; width: 800px; height: 800px; margin-left: -400px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 214, 120, .20) 0 9deg, transparent 9deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle, #000, rgba(0, 0, 0, .6) 38%, transparent 66%); mask-image: radial-gradient(circle, #000, rgba(0, 0, 0, .6) 38%, transparent 66%); }
#winSheet.on .rays { animation: kRays 40s linear infinite; }
#winSheet .kbg::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 204px; background: linear-gradient(transparent, #221B25); }
@keyframes kRays { to { transform: rotate(360deg); } }
#winSheet.go .kbg { animation: kFade .25s both; }
@keyframes kFade { from { opacity: 0; } }
.kdefs { position: absolute; pointer-events: none; }

/* ribbon */
#winSheet .ribbon { position: relative; z-index: 2; width: 182px; height: 58px; margin: 0; padding: 0; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(#FF8A72, #EE6A55 48%, #D9503F);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 #B8392D, 0 4px 0 #8E2B22; }
#winSheet .ribbon::before, #winSheet .ribbon::after { content: ''; position: absolute; z-index: -1; top: 9px; width: 90px; height: 50px; background: linear-gradient(#C94A3A, #A83A30); }
#winSheet .ribbon::before { left: -78px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 22px 50%); }
#winSheet .ribbon::after { right: -78px; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%); }
#winSheet .ribbon .eyebrow { position: static; font: 700 30px/1 Fredoka, system-ui, sans-serif; letter-spacing: .04em; opacity: 1; color: #FFF8EC; text-shadow: 0 3px 0 #A8352A; white-space: nowrap; }
#winSheet .ribbon .eyebrow::before { content: ''; position: absolute; left: 10px; right: 10px; top: 5px; height: 14px; border-radius: 8px; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .08)); }
#winSheet .eyebrow small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#winSheet.go .ribbon { animation: kDrop .42s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes kDrop { from { transform: translateY(-90px); opacity: 0; } 40% { opacity: 1; } }
#winSheet h2 { margin: 14px 0 0; font: 700 34px/1.05 Fredoka, system-ui, sans-serif; color: #FFF3DA; text-shadow: 0 3px 0 rgba(60, 25, 25, .55), 0 8px 18px rgba(0, 0, 0, .35); }
#winSheet.go h2 { animation: winUp .4s .25s both; }

/* the hung picture */
#winSheet .hang { width: calc(var(--pw) + 40px); margin-top: 26px; transform-origin: 50% -22px; isolation: isolate; }
#winSheet .hang::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%;
  background: radial-gradient(rgba(255, 226, 150, .55), rgba(255, 190, 100, .22) 45%, transparent 70%); }
#winSheet.go .hang::before { animation: kPulse .5s .82s both; }
@keyframes kPulse { 50% { transform: scale(1.15); } }
#winSheet .hang::after { content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -12px; height: 20px; border-radius: 50%; background: radial-gradient(rgba(20, 8, 20, .5), transparent 70%); }
#winSheet .cord { left: 0; top: -26px; width: 100%; height: 30px; margin: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208 30' preserveAspectRatio='none'%3E%3Cpath d='M104 4L34 28M104 4l70 24' fill='none' stroke='%23F3DDB4' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='104' cy='4' r='4' fill='%23C9B79C'/%3E%3Ccircle cx='103' cy='3' r='1.5' fill='%23fff' opacity='.7'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
#winSheet .winframe { position: relative; margin: 0; padding: 20px; border-radius: 18px;
  background: linear-gradient(145deg, #CF9C6B, #A6703F);
  box-shadow: inset 0 3px 0 rgba(255, 232, 205, .5), inset 0 -4px 0 #7A4C2A, 0 6px 0 #6B3F22, 0 0 0 4px rgba(255, 214, 120, .12); transition: none; }
#winSheet .winframe::before, #winSheet .gilt::before { content: ''; position: absolute; inset: 10px; border-radius: 11px; box-shadow: inset 0 3px 5px rgba(60, 25, 5, .55); }
#winSheet .winframe::before { background: linear-gradient(#7A4C2A, #A6703F); }
#winSheet .gilt { background: linear-gradient(145deg, #FFE9A0, #F7C550 35%, #E39A1E 70%, #F2B33D); border-radius: inherit; }
#winSheet .gilt::before { background: linear-gradient(#B8700F, #E8A83A); }
#winSheet.gild .winframe { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .7), inset 0 -4px 0 #B8700F, 0 6px 0 #9A5E0C, 0 0 0 4px rgba(255, 214, 120, .28); }
#winSheet .wpic { position: relative; z-index: 1; width: var(--pw); border-radius: 4px; box-shadow: 0 0 0 6px #FFF4DE; }
#winSheet #winPic { width: 100%; min-width: 0; border-radius: 3px; }
#winSheet .depth { position: absolute; z-index: 2; inset: 0; border-radius: 3px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .38), transparent 30%),
    linear-gradient(rgba(255, 255, 255, .12), transparent 40%, rgba(70, 20, 10, .28)),
    repeating-linear-gradient(90deg, rgba(60, 15, 15, .16) 0 1px, transparent 1px calc(100% / 12)),
    repeating-linear-gradient(0deg, rgba(60, 15, 15, .16) 0 1px, transparent 1px calc(100% / 14));
  box-shadow: inset 0 3px 6px rgba(70, 35, 10, .35); }
#winSheet .btn.share { position: absolute; z-index: 3; left: -14px; top: -14px; flex: none; width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 50%;
  background: linear-gradient(#FFFDF6, #F1DDBE); color: #6B4A38; box-shadow: inset 0 2px 0 #fff, 0 3px 0 #B98557, 0 5px 8px rgba(0, 0, 0, .3); }
#winSheet .btn.share:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #fff, 0 0 0 #B98557; }

/* stars: three stacked-path stars that stamp in (the .on class comes from topple.js winBeats) */
#winSheet .wstars { position: relative; display: block; width: 300px; height: 122px; margin: -24px 0 0; z-index: 2; }
#winSheet .wstars[hidden] { display: none; }
#winSheet .wstars i { position: absolute; display: block; width: 92px; height: 92px; top: 28px; left: 4px; transform-origin: 50% 55%; }
#winSheet .wstars i:nth-child(2) { width: 127px; height: 127px; top: 0; left: 86.5px; }
#winSheet .wstars i:nth-child(3) { left: 204px; }
#winSheet .wstars svg { display: block; width: 100%; height: 100%; fill: none; stroke: none; }
#winSheet .wstars i:not(.on) { --kb: #54415A; --kbs: #3B2C3A; --kr: #6A5470; --ks: 0; }
#winSheet.go .wstars i { opacity: 0; transform: scale(.6); }
#winSheet .wstars i.on, #winSheet .wstars i.dim, #winSheet.skip .wstars i { opacity: 1; transform: none; }
#winSheet.go .wstars i.on { animation: kStamp .38s cubic-bezier(.3, 1.9, .5, 1) both; }
@keyframes kStamp { 0% { transform: scale(2.3); opacity: 0; } 55% { transform: scale(.9); opacity: 1; } 100% { transform: none; opacity: 1; } }
#winSheet .wstars i:nth-child(2)::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; opacity: 0;
  background: radial-gradient(rgba(255, 236, 160, .75), transparent 70%); }
#winSheet .wstars i:nth-child(2).on::before { opacity: .6; }
#winSheet.go .wstars i:nth-child(2).on::before { animation: kBloom .6s both; }
@keyframes kBloom { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: .6; } }
#winSheet .wstars i::after { content: ''; position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; border-radius: 50%; border: 3px solid #FFD45C; opacity: 0; pointer-events: none; }
#winSheet.go .wstars i.on::after { animation: kRing .45s ease-out both; }
@keyframes kRing { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
#winSheet .wstars b { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3px; border-radius: 50%; background: #FFE585; opacity: 0; pointer-events: none; }
#winSheet.go .wstars i.on b { animation: kSpark .5s ease-out both; }
@keyframes kSpark { from { transform: rotate(var(--a)) translateX(14px); opacity: 1; } to { transform: rotate(var(--a)) translateX(46px) scale(.2); opacity: 0; } }
#winSheet.skip .wstars i::after, #winSheet.skip .wstars b { animation: none; }

/* score and stars chips */
#winSheet .chips { display: flex; gap: 12px; width: 330px; margin: 8px 0 0; justify-content: center; }
#winSheet .chip { flex: 1; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 16px;
  background: linear-gradient(#2A2030, #3D3141); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .12), 0 3px 0 #17101A; }
#winSheet .chip i { font: 600 11px/1 Fredoka, system-ui, sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #CDB9C8; }
#winSheet .chip b { display: flex; align-items: center; gap: 5px; margin-top: 3px; font: 700 28px/1 Fredoka, system-ui, sans-serif; color: #FFD45C; font-variant-numeric: tabular-nums; }
#winSheet .chip.fire b { color: #FF9A5A; }
#winSheet .chip svg { width: 22px; height: 22px; }
#winSheet.go .chip { opacity: 0; transform: scale(1.35); }
#winSheet .chip.on, #winSheet.skip .chip { opacity: 1; transform: none; transition: transform .34s cubic-bezier(.3, 1.7, .5, 1), opacity .12s; }
#winSheet.go .chip.on svg { animation: kPulseS .5s .15s; }
@keyframes kPulseS { 50% { transform: scale(1.35); } }

/* reward card */
#winSheet .rcard { position: relative; width: 330px; margin: 14px 0 0; padding: 14px 16px; border-radius: 24px; text-align: left;
  background: linear-gradient(#FFF8EA, #F6E3C4); box-shadow: inset 0 0 0 3px #FFE6A8, inset 0 0 0 5px rgba(242, 179, 61, .45), inset 0 7px 0 rgba(255, 255, 255, .6), 0 6px 0 #B98557, 0 12px 16px rgba(20, 8, 20, .3); }
#winSheet .rcard[hidden] { display: none; }
#winSheet.go .rcard { animation: kUp24 .35s 1.9s both; }
@keyframes kUp24 { from { transform: translateY(24px); opacity: 0; } }
#winSheet .rrow { display: flex; align-items: center; gap: 14px; }
#winSheet .rtile { position: relative; flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; color: #4A2E22;
  background: linear-gradient(#FFF8EA, #FFEBC6); box-shadow: inset 0 0 0 3px #F2B33D, inset 0 3px 0 #fff, 0 4px 0 #C98A12; }
#winSheet .rtile::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(rgba(255, 214, 120, .6), transparent 68%); }
#winSheet .rcard { isolation: isolate; }
#winSheet .rtile svg { width: 40px; height: 40px; }
#winSheet .rtile:empty { display: none; }
#winSheet.go .rtile { animation: kTile .5s 1.9s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes kTile { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } }
#winSheet .rtile .new { position: absolute; right: -14px; top: -10px; padding: 3px 8px; border-radius: 8px; transform: rotate(10deg); background: #EE6A55; color: #fff;
  font: 700 12px/1 Fredoka, system-ui, sans-serif; letter-spacing: .06em; box-shadow: 0 2px 0 #A8352A; }
#winSheet.go .rtile .new { animation: kWob .6s 2.3s ease-in-out; }
@keyframes kWob { 25% { transform: rotate(-4deg); } 55% { transform: rotate(16deg); } }
#winSheet .rtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#winSheet .rtxt b { font: 700 23px/1.1 Fredoka, system-ui, sans-serif; color: #4A2E22; }
#winSheet .rtxt small { font: 500 14px/1.2 Fredoka, system-ui, sans-serif; color: #7A5A48; }
#winSheet .rtxt small:empty { display: none; }
#winSheet .jar { height: 14px; margin-top: 5px; border-radius: 7px; overflow: hidden; background: #E3CDA6; box-shadow: inset 0 2px 3px rgba(90, 45, 5, .35); }
#winSheet .jar i { display: block; height: 100%; border-radius: 7px; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(#FFE585, #FFB52E 55%, #E8921A); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6); transition: transform .6s cubic-bezier(.3, .8, .4, 1); }
#winSheet.go .jar i:not(.on) { transform: scaleX(0); }
#winSheet.skip .jar i { transform: scaleX(var(--p, 0)); }
#winSheet .rcard:not([data-k=jar]) .jar, #winSheet .rcard:not([data-k=boost]) #winBulbs, #winSheet .rcard[data-k=chap] .rrow { display: none; }
#winSheet .bulbs { display: block; width: 100%; max-width: 204px; height: 36px; }
.bulb .h { fill: #FFD45C; opacity: 0; transition: opacity .2s; }
.bulb .b { fill: #D8BF98; stroke: #9C7C58; stroke-width: 1.5; }
.bulb.lit .h { opacity: .35; } .bulb.lit .b { fill: #FFE39A; stroke: #C98A12; }
.bulb { transform-box: fill-box; transform-origin: 50% 50%; }
.bulb.fresh { animation: kBulb .45s ease-out; }
@keyframes kBulb { 40% { transform: scale(1.6); } }
#winBulbs.flash { animation: kFlash .5s; }
@keyframes kFlash { 40% { opacity: .35; } }
/* chapter complete */
#winSheet .rtag { display: none; position: absolute; left: 50%; top: -17px; transform: translateX(-50%); padding: 7px 18px; border-radius: 16px; white-space: nowrap; text-transform: uppercase;
  background: linear-gradient(#FFE585, #FFB52E 55%, #E8921A); color: #7C4A05; font: 700 14px/1 Fredoka, system-ui, sans-serif; letter-spacing: .08em; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 #BC7208; }
#winSheet .rcard[data-k=chap] { padding-top: 24px; } #winSheet .rcard[data-k=chap] .rtag { display: block; }
#winSheet.go .rcard[data-k=chap] .rtag { animation: kTagPop .45s 2.15s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes kTagPop { from { transform: translateX(-50%) scale(.4); opacity: 0; } 70% { transform: translateX(-50%) scale(1.1); opacity: 1; } }
#winSheet .rcard[data-k=chap]::before { content: 'Twelve pictures hung'; display: block; margin-bottom: 8px; text-align: center; font: 700 20px/1.1 Fredoka, system-ui, sans-serif; color: #4A2E22; }
#winSheet .chprog { margin: 0; gap: 8px; }
#winSheet .chprog .slots { gap: 4px; }
#winSheet .chprog .slots i { width: 18px; height: 24px; border-radius: 6px; background: #E9D7BC; box-shadow: inset 0 2px 3px rgba(90, 45, 5, .3); }
#winSheet .chprog .slots i.did { background: linear-gradient(#fff, #F1DDBE); box-shadow: 0 2px 0 #B98557; }
#winSheet .chprog .slots i.new { background: #FFE39A; box-shadow: 0 0 0 3px #F2B33D, 0 2px 0 #C98A12; }
#winSheet .chprog small { font: 500 14px/1.2 Fredoka, system-ui, sans-serif; color: #7A5A48; }
#winSheet.go .chprog { animation: none; }

/* Pip's line, hint and the buttons */
#winSheet .pipsay { margin: 16px 0 0; max-width: 330px; font: 500 15px/1.25 Fredoka, system-ui, sans-serif; color: #FFF3DA; }
#winSheet .best { margin: 4px 0 0; max-width: 330px; font: 600 14px/1.25 Fredoka, system-ui, sans-serif; color: #FFD58A; }
#winSheet .best.soft { color: rgba(255, 240, 225, .8); }
#winSheet .btns { width: 330px; margin-top: 14px; gap: 12px; justify-content: stretch; }
#winSheet .btns .btn { height: 64px; margin: 0; font: 700 26px/1 Fredoka, system-ui, sans-serif; letter-spacing: .01em; }
#winSheet #replayBtn { flex: none; width: 64px; padding: 0; border-radius: 20px; background: linear-gradient(#FFFDF6, #F1DDBE); color: #6B4A38; box-shadow: inset 0 2px 0 #fff, 0 6px 0 #B98557; }
#winSheet #replayBtn[hidden] { display: none; }
#winSheet #nextBtn { flex: 1; width: auto; border-radius: 22px; color: #FFF8EC; text-shadow: 0 3px 0 #A8352A;
  background: linear-gradient(#FF8A72, #EE6A55 48%, #E0523F);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(150, 40, 30, .35), 0 6px 0 #A8352A, 0 12px 18px rgba(0, 0, 0, .35); }
#winSheet #nextBtn::after { content: ''; width: 12px; height: 12px; margin-left: 10px; border: solid #FFF8EC; border-width: 0 5px 5px 0; border-radius: 2px; transform: rotate(-45deg); filter: drop-shadow(0 3px 0 #A8352A); }
#winSheet .btns .btn:active { transform: translateY(5px); }
#winSheet #replayBtn:active { box-shadow: inset 0 2px 0 #fff, 0 1px 0 #B98557; }
#winSheet #nextBtn:active { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(150, 40, 30, .35), 0 1px 0 #A8352A; }

/* confetti: about 30 <i> that topple.js adds at the third star and clears after 3 s */
#winSheet > .conf { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.conf i { position: absolute; top: -30px; width: 8px; height: 13px; border-radius: 3px; background: var(--c); opacity: 0; animation: kFall var(--t) var(--d) cubic-bezier(.3, .1, .7, 1) both; }
.conf i.big { width: 20px; height: 30px; border-radius: 6px; filter: blur(3px); }
@keyframes kFall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 50% { transform: translate(calc(var(--s) * -.6), 45vh) rotate(calc(var(--r) * .5)); opacity: 1; }
  85% { opacity: 1; } 100% { transform: translate(var(--s), 105vh) rotate(var(--r)); opacity: 0; } }

#winSheet.skip .ribbon, #winSheet.skip h2, #winSheet.skip .rcard, #winSheet.skip .rtile, #winSheet.skip .kbg, #winSheet.skip .hang::before { animation: none; }
/* short phones (360x640 and the like): everything scales down together so Next never leaves the screen */
@media (max-height: 800px) { #winSheet > :not(.kbg):not(.conf) { zoom: .93; } }
@media (max-height: 740px) { #winSheet > :not(.kbg):not(.conf) { zoom: .85; } }
@media (max-height: 680px) { #winSheet > :not(.kbg):not(.conf) { zoom: .77; } #winSheet .pipsay { margin-top: 10px; } }
@media (max-height: 620px) { #winSheet > :not(.kbg):not(.conf) { zoom: .68; } }
@media (prefers-reduced-motion: reduce) {
  #winSheet *, #winSheet *::before, #winSheet *::after { animation: none !important; transition: none !important; }
  #winSheet.go .wstars i, #winSheet.go .chip { opacity: 1; transform: none; }
  #winSheet .jar i { transform: scaleX(var(--p, 0)); }
  #winSheet .bulb.on .h { opacity: .35; } #winSheet .bulb.on .b { fill: #FFE39A; stroke: #C98A12; }
  #winSheet > .conf { display: none; }
}