/* Routine Reshuffle · In an Olay World · Boost Games for Olay
   The game is a fixed 540×960 phone stage scaled to fit the window (see game.js).
   Outside: the Olay cottage in the rose meadow. Inside: the bathroom shelf behind its doors. */
@font-face { font-family: 'Montserrat'; font-weight: 500; src: url(../fonts/Montserrat-Medium.woff) format('woff'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; src: url(../fonts/Montserrat-SemiBold.woff) format('woff'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; src: url(../fonts/Montserrat-Bold.woff) format('woff'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; src: url(../fonts/Montserrat-ExtraBold.woff) format('woff'); }
@font-face { font-family: 'Montserrat'; font-weight: 900; src: url(../fonts/Montserrat-Black.woff) format('woff'); }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 500; src: url(../fonts/BodoniModa-MediumItalic.woff) format('woff'); }
:root {
  --red: #C11F33; --red-deep: #8E1424; --ink: #161716; --ink-70: rgba(22,23,22,.7); --pearl: #F7F4F2;
  --sans: 'Montserrat', system-ui, sans-serif; --serif: 'Bodoni Moda', 'Didot', serif; --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #141414; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
#viewport { position: fixed; inset: 0; }
#stage { position: absolute; left: 0; top: 0; width: 540px; height: 960px; transform-origin: 0 0; overflow: hidden; border-radius: 28px;
  background: #dfe9f2; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: none; }
body.still #stage { border-radius: 0; }
.scene { position: absolute; inset: 0; visibility: hidden; }
.scene.on { visibility: visible; }
.bg { position: absolute; inset: 0; background: center / cover no-repeat; }
#mist { position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 70% 60% at 50% 55%, #fff, rgba(255,255,255,.9) 55%, rgba(255,255,255,.75)); }

/* ---------- buttons + small parts ---------- */
.btn { display: flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border-radius: 30px; font: 800 15px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: transform .15s, background .2s; }
.btn:active { transform: scale(.97); }
.btn.red { background: var(--red); color: #fff; box-shadow: 0 12px 24px rgba(120,0,20,.35), inset 0 2px 0 rgba(255,255,255,.2); }
.btn.ghost { color: var(--red); background: rgba(193,31,51,.08); }
.btn.big { height: 62px; font-size: 17px; }
.k { display: block; font: 800 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 18px; background: rgba(255,255,255,.95); box-shadow: 0 6px 14px rgba(40,0,10,.22); font: 800 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

/* ---------- START: outside the cottage ---------- */
.cam { position: absolute; inset: 0; transform-origin: 274px 529px; }
.sky-shade { position: absolute; inset: 0 0 auto; height: 420px; pointer-events: none; background: linear-gradient(180deg, rgba(10,30,60,.3), rgba(10,30,60,.08) 60%, rgba(10,30,60,0)); }
.title { position: absolute; left: 0; right: 0; top: 40px; text-align: center; color: #fff; }
.t-olay { display: block; width: 116px; margin: 0 auto 14px; filter: drop-shadow(0 2px 8px rgba(0,20,40,.3)); }
.title em { display: block; font: italic 500 26px/1 var(--serif); text-shadow: 0 2px 12px rgba(0,20,40,.4); }
.title h1 { margin: 10px 0 0; font: 900 64px/.92 var(--sans); letter-spacing: -.02em; text-transform: uppercase; }
.title h1 span { display: block; text-shadow: 0 6px 24px rgba(0,20,40,.35); }
.title h1 b { display: inline-block; margin-top: 8px; padding: 6px 16px 8px; border-radius: 10px; background: var(--red); font-weight: 900; box-shadow: 0 14px 28px rgba(120,0,20,.4); transform: rotate(-2deg); }
.tagline { position: absolute; left: 0; right: 0; top: 272px; margin: 0; text-align: center; font: 700 17px/1.35 var(--sans); color: #fff; text-shadow: 0 2px 10px rgba(0,20,40,.45); }
.doorway { position: absolute; left: 169px; top: 382px; width: 211px; height: 295px; opacity: 0; background: url(../assets/scenes/shelf.jpg) 50% 38% / cover no-repeat; }
.doors { position: absolute; inset: 0; perspective: 900px; perspective-origin: 274px 529px; pointer-events: none; }
.door { position: absolute; top: 382px; height: 295px; background: url(../assets/scenes/cottage.jpg) no-repeat; background-size: 540px 967.5px; opacity: 0; backface-visibility: hidden; }
.door.l { left: 169px; width: 105px; background-position: -169px -385.75px; transform-origin: 0 50%; }
.door.r { left: 274px; width: 106px; background-position: -274px -385.75px; transform-origin: 100% 50%; }
.door-glow { position: absolute; left: 169px; top: 382px; width: 211px; height: 295px; opacity: 0; mix-blend-mode: screen; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 50%, #fff, rgba(255,255,255,.6) 50%, rgba(255,255,255,0)); }
.knock { position: absolute; left: 169px; top: 382px; width: 211px; height: 295px; }
.knock i { position: absolute; left: 105px; top: 273px; }
.knock i::before, .knock i::after { content: ''; position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 12px rgba(255,255,255,.9); animation: knock 2.4s ease-out infinite; }
.knock i::after { animation-delay: 1.2s; }
@keyframes knock { from { transform: scale(.5); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.start-bar { position: absolute; left: 60px; right: 60px; bottom: 54px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.start-bar .btn { width: 100%; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.03); } }
.start-bar small { font: 800 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }

/* ---------- GAME: the shelf ---------- */
#inside .bg { transform: scale(var(--zoom, 1)); }
.hud { position: absolute; left: 16px; right: 16px; top: 16px; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 10px; }
.hud-olay { width: 84px; filter: drop-shadow(0 2px 6px rgba(60,0,10,.35)); }
.hud .lvl { margin-right: auto; margin-left: 8px; }
.hud .hud-olay { position: absolute; left: 50%; top: 9px; margin-left: -42px; }
.pill.icon { width: 36px; padding: 0; justify-content: center; color: var(--red); }
.pill.icon svg { width: 19px; height: 19px; }
.pill.icon:active { transform: rotate(-40deg); transition: transform .2s; }
.time { gap: 6px; padding: 0 14px 0 6px; min-width: 76px; }
.time svg { width: 28px; height: 28px; transform: rotate(-90deg); }
.time circle { fill: none; stroke: rgba(193,31,51,.15); stroke-width: 4; }
.time circle.arc { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 0; }
.time b { font: 900 18px/1 var(--sans); letter-spacing: 0; }
.bar { flex: 1 0 100%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.55); overflow: hidden; box-shadow: 0 2px 6px rgba(40,0,10,.2); }
.bar i { display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--red-deep), var(--red), #ff7a88); transform-origin: 0 50%; }
#stage.hurry .time { background: var(--red); color: #fff; animation: hurry .5s ease-in-out infinite alternate; }
#stage.hurry .time circle { stroke: rgba(255,255,255,.3); } #stage.hurry .time circle.arc { stroke: #fff; }
@keyframes hurry { to { transform: scale(1.08); } }

/* products: each one stands on its shelf; the outer box moves between slots, the image lifts when picked */
#products { position: absolute; inset: 0; z-index: 2; }
.prod { position: absolute; left: 0; top: 0; transition: transform .45s var(--ease); touch-action: none; cursor: grab; }
.prod.snap, .prod.drag { transition: none; }
.prod.drag { z-index: 9; cursor: grabbing; }
.prod img { display: block; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 100%; transition: transform .25s var(--ease), filter .25s; filter: drop-shadow(0 7px 5px rgba(60,20,20,.28)); }
.prod.sel img, .prod.drag img { transform: translateY(-14px) scale(1.08); filter: drop-shadow(0 0 10px rgba(255,255,255,.95)) drop-shadow(0 0 3px #fff) drop-shadow(0 16px 10px rgba(60,20,20,.3)); }
.prod.sel::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 70%; height: 10px; margin-left: -35%; border-radius: 50%; background: radial-gradient(closest-side, rgba(193,31,51,.55), rgba(193,31,51,0)); }
.prod.hop img { animation: hopImg .75s var(--ease) both; }
@keyframes hopImg { 40% { transform: translateY(-46px) rotate(-8deg) scale(1.05); } }
.prod.ok img { animation: okPop .5s var(--ease) both; }
@keyframes okPop { 40% { transform: translateY(-10px) scale(1.06); } }
/* clue: the products already in the right spot get a white halo, a red glow and a tick until they move. Nothing moves. */
.prod.clue img { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px rgba(193,31,51,.95)) drop-shadow(0 0 12px rgba(193,31,51,.7)); }
.prod.clue::before { content: ''; position: absolute; left: 50%; top: -24px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; z-index: 2;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(120,0,20,.4); animation: cluePop .45s var(--ease) both; }
@keyframes cluePop { from { transform: scale(0); } 70% { transform: scale(1.2); } }
/* new products this round */
.prod.new::before { content: 'New'; position: absolute; left: 50%; top: -22px; transform: translateX(-50%); padding: 4px 7px 3px; border-radius: 8px; z-index: 2; background: var(--red); color: #fff; font: 900 9px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 4px 8px rgba(120,0,20,.35); animation: cluePop .45s var(--ease) both; }
.prod.new img { animation: newIn .7s var(--ease) both; }
@keyframes newIn { from { transform: translateY(-40px) scale(.6); opacity: 0; } }
.prod.drop img, .prod.drop.new img { animation: dropIn .75s cubic-bezier(.3,1.45,.5,1) var(--dl) both; }
.prod.drop::before { animation-delay: calc(var(--dl) + .5s) !important; }
@keyframes dropIn { from { transform: translateY(-320px) rotate(-10deg); opacity: 0; } 45% { opacity: 1; } }
.prod.leave img { animation: leaveUp .55s cubic-bezier(.5,0,.75,0) both; }
@keyframes leaveUp { to { transform: translateY(-480px) rotate(-20deg) scale(.7); opacity: 0; } }
#stage:not(.memorising) .prod.new::before { display: none; }
/* the name label that appears above a product when you pick it up */
.tip { position: absolute; left: 0; top: 0; z-index: 7; padding: 8px 12px 9px; border-radius: 12px; background: #fff; text-align: center; white-space: nowrap; box-shadow: 0 10px 22px rgba(40,0,10,.3); pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% + 8px)); transition: opacity .2s, transform .25s var(--ease); }
.tip.on { opacity: 1; transform: translate(-50%, -100%); }
.tip::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.tip b { display: block; font: 800 14px/1.15 var(--sans); color: var(--ink); }
.tip span { display: block; margin-top: 3px; font: 800 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
/* shelf marks: routine icon on the left of each shelf, numbered steps under the products */
#marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.s-ic { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; box-shadow: 0 4px 10px rgba(120,0,20,.35); }
.s-ic svg { width: 18px; height: 18px; }
.step { position: absolute; height: 20px; margin-top: -10px; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 0 8px 0 3px; border-radius: 10px; background: #fff; box-shadow: 0 3px 8px rgba(60,20,20,.2); font: 800 9.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: padding .3s; }
.step i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--red); color: #fff; font: 900 9px/1 var(--sans); font-style: normal; }
.step span { transition: opacity .3s; }
#stage:not(.memorising) .step { padding: 0 3px; gap: 0; }
#stage:not(.memorising) .step span { display: none; }
/* while memorising, the number sits on the pill's corner so even "Moisturise" fits under its product */
#stage.memorising .step { gap: 0; padding: 0 7px 0 9px; font-size: 8.5px; letter-spacing: .03em; }
#stage.memorising .step i { position: absolute; left: -7px; top: -6px; box-shadow: 0 2px 5px rgba(120,0,20,.35); }
.glowline { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.glowline i { position: absolute; left: 60px; width: 420px; height: 10px; margin-top: -5px; border-radius: 5px; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,235,238,0)); opacity: 0; }
.glowline i.on { animation: shelfGlow 1s ease-out both; }
@keyframes shelfGlow { 30% { opacity: 1; transform: scaleY(2.4); } 100% { opacity: 0; } }
.shout { position: absolute; left: 50%; top: 430px; z-index: 6; padding: 14px 26px 15px; border-radius: 16px; background: var(--red); color: #fff; font: 900 34px/1 var(--sans); text-transform: uppercase; letter-spacing: -.01em; transform: translate(-50%, -50%) rotate(-4deg); opacity: 0; pointer-events: none; box-shadow: 0 16px 30px rgba(120,0,20,.4); }
.shout.on { animation: shout 1s var(--ease) both; }
@keyframes shout { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(.4); } 25% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(.9); } }

/* the dock: what to do right now */
.dock { position: absolute; left: 16px; right: 16px; bottom: 22px; z-index: 5; height: 92px; border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: 0 16px 34px rgba(40,0,10,.28); transform: translateY(140px); transition: transform .5s var(--ease); }
.dock.on { transform: none; }
.dock > div { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px; padding: 0 16px 0 22px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.dock.mem .d-mem, .dock.play .d-play { opacity: 1; visibility: visible; transition: opacity .3s; }
.dock b { display: block; font: 800 19px/1.15 var(--sans); }
.dock span { display: block; margin-top: 4px; font: 600 13.5px/1.3 var(--sans); color: var(--ink-70); }
.count { flex: none; display: grid !important; place-items: center; width: 60px; height: 60px; margin: 0 !important; border-radius: 50%; background: var(--red); color: #fff !important; font: 900 30px/1 var(--sans) !important; box-shadow: 0 8px 16px rgba(120,0,20,.3); }
.count.tick { animation: tickPop .4s var(--ease); }
@keyframes tickPop { 0% { transform: scale(1.25); } }
/* while re-ordering there is no card, just the live "in the right spot" counter and a small clue button */
.dock.play { background: none; box-shadow: none; }
.dock .d-play { justify-content: space-between; padding: 0 4px 0 0; }
.placed { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 22px 0 8px; border-radius: 32px; background: rgba(255,255,255,.96); box-shadow: 0 12px 28px rgba(40,0,10,.28); }
.dock .placed b { display: flex; align-items: baseline; justify-content: center; min-width: 76px; height: 48px; padding: 0 12px; border-radius: 24px; background: var(--red); color: #fff; font: 900 26px/48px var(--sans); box-shadow: 0 6px 14px rgba(120,0,20,.3); transition: background .25s; }
.dock .placed b em { font-style: normal; }
.dock .placed b small { margin-left: 2px; font: 800 14px/1 var(--sans); opacity: .75; }
.dock .placed span { margin: 0; font: 800 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.pbar { display: block; width: 132px; height: 7px; margin-top: 9px; border-radius: 4px; background: #F3E3E5; overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--red), #ff5468); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); }
.placed.up b { animation: placedUp 1s var(--ease); }
.placed.down { animation: placedDown .45s ease-in-out; }
.placed.down b { animation: placedDownB 1s; }
@keyframes placedUp { 0%, 70% { background: #1f9d55; } 30% { transform: scale(1.18); background: #1f9d55; } }
@keyframes placedDownB { 0%, 70% { background: var(--red-deep); } }
@keyframes placedDown { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
button.clue { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--red); box-shadow: inset 0 0 0 2px rgba(193,31,51,.35), 0 10px 22px rgba(40,0,10,.24); transition: transform .15s, opacity .2s; }
button.clue svg { width: 21px; height: 21px; }
.dock button.clue b { font: 900 8.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: inherit; }
button.clue i { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--red); color: #fff; font: 900 11px/1 var(--sans); font-style: normal; box-shadow: 0 3px 8px rgba(120,0,20,.35); }
button.clue:active { transform: scale(.92); }
button.clue:disabled { opacity: .45; cursor: default; }
button.clue.glow { animation: clueGlow 1.6s ease-in-out infinite; }
@keyframes clueGlow { 50% { box-shadow: inset 0 0 0 2px rgba(193,31,51,.85), 0 10px 22px rgba(40,0,10,.24), 0 0 0 6px rgba(193,31,51,.18); } }

/* round banner */
.banner { position: absolute; left: 30px; right: 30px; top: 360px; z-index: 6; padding: 22px 20px 20px; border-radius: 26px; background: var(--red); color: #fff; text-align: center; box-shadow: 0 24px 50px rgba(120,0,20,.45); opacity: 0; transform: scale(.8); pointer-events: none; }
.banner.on { animation: banner 1.9s var(--ease) both; }
@keyframes banner { 0% { opacity: 0; transform: scale(.7); } 16% { opacity: 1; transform: scale(1.04); } 24%, 84% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
.banner span { display: block; font: 800 13px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; opacity: .85; }
.banner b { display: block; margin: 10px 0 8px; font: italic 500 34px/1.05 var(--serif); }
.banner small { font: 800 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* sheets: cards over the shelf */
.sheet { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(22,23,22,.42); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.sheet.on { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
#shopSheet { z-index: 9; }
.card { position: relative; width: 100%; padding: 30px 28px 26px; border-radius: 30px; background: #fff; text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,.35); transform: translateY(30px) scale(.96); transition: transform .5s var(--ease); }
.sheet.on .card { transform: none; }
.card h2 { margin: 10px 0 8px; font: 900 32px/1.05 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.card p { margin: 0 0 18px; font: 600 15px/1.45 var(--sans); color: var(--ink-70); }
.card .btn { width: 100%; margin-top: 10px; }
.btn.pulse { animation: playPulse 1.8s ease-in-out infinite; }
@keyframes playPulse { 0%, 100% { transform: scale(1); box-shadow: 0 12px 24px rgba(120,0,20,.35), 0 0 0 0 rgba(193,31,51,.45); } 50% { transform: scale(1.04); box-shadow: 0 16px 30px rgba(120,0,20,.4), 0 0 0 12px rgba(193,31,51,0); } }
.tick { display: grid; place-items: center; width: 70px; height: 70px; margin: -4px auto 0; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 12px 24px rgba(120,0,20,.35); }
.tick svg { width: 38px; height: 38px; }
.next { margin: 4px 0 8px; padding: 16px; border-radius: 18px; background: var(--pearl); }
.next b { display: block; margin: 8px 0 4px; font: 800 17px/1.25 var(--sans); }
.next span { font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); }

/* how to play: the mini shelf demo and the three steps */
.howto { padding-top: 26px; }
.howto h2 { margin-bottom: 14px; }
.demo { position: relative; height: 196px; margin: 0 -6px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #f4eeec, #fbf8f7); box-shadow: inset 0 0 0 1.5px rgba(193,31,51,.12); }
.d-label { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 4px; border-radius: 15px; background: var(--red); color: #fff; box-shadow: 0 6px 12px rgba(120,0,20,.3); }
.d-label i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--red); font: 900 11px/1 var(--sans); font-style: normal; }
.d-label b { font: 900 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.d-label.pop { animation: tickPop .4s var(--ease); }
.d-board { position: absolute; left: 22px; right: 22px; top: 150px; height: 14px; border-radius: 4px; background: linear-gradient(180deg, #fff, #e7e0dd); box-shadow: 0 6px 10px rgba(60,20,20,.12), 0 -1px 0 rgba(255,255,255,.9) inset; }
.d-board::after { content: ''; position: absolute; left: 6%; right: 6%; top: 2px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.95); box-shadow: 0 0 8px rgba(255,255,255,.9); }
.d-prods { position: absolute; inset: 0; z-index: 2; }
.dp { position: absolute; left: 0; top: 0; transition: transform .55s var(--ease); }
.dp img { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; transition: transform .25s var(--ease); filter: drop-shadow(0 5px 4px rgba(60,20,20,.22)); }
.dp.sel img { transform: translateY(-10px) scale(1.08); filter: drop-shadow(0 0 8px rgba(255,255,255,.95)) drop-shadow(0 10px 8px rgba(60,20,20,.25)); }
.dp.hop img { animation: hopImg .6s var(--ease) both; }
.dp.ok img { animation: okPop .5s var(--ease) both; }
.dn { position: absolute; top: 157px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font: 900 9.5px/1 var(--sans); box-shadow: 0 3px 6px rgba(120,0,20,.3); transition: opacity .3s, transform .3s; z-index: 3; }
.demo:not(.mem) .dn { opacity: 0; transform: scale(.4); }
.d-tip { position: absolute; left: 0; top: 0; z-index: 4; padding: 6px 10px 7px; border-radius: 10px; background: #fff; font: 800 11.5px/1.1 var(--sans); white-space: nowrap; box-shadow: 0 8px 16px rgba(40,0,10,.25); opacity: 0; transform: translate(-50%, -100%); transition: opacity .2s; }
.d-tip small { display: block; margin-top: 2px; font: 800 8.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.d-tip.on { opacity: 1; }
.d-hand { position: absolute; left: 0; top: 0; z-index: 5; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255,255,255,.55); border: 3px solid var(--ink); box-shadow: 0 6px 14px rgba(0,0,0,.25); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
.d-hand.on { opacity: 1; }
.d-hand.tap { animation: handTap .35s ease-out; }
.d-hand::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--red); opacity: 0; }
.d-hand.tap::after { animation: ripple .5s ease-out; }
@keyframes handTap { 50% { scale: .8; } }
@keyframes ripple { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2); } }
.demo.done .d-board::after { animation: shelfGlow 1s ease-out both; }
.steps { margin: 14px 0 6px; padding: 0; list-style: none; text-align: left; }
.steps li { display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: 16px; transition: background .3s; }
.steps li.on { background: rgba(193,31,51,.07); }
.steps i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(193,31,51,.15); color: var(--red); font: 900 15px/1 var(--sans); font-style: normal; transition: background .3s, color .3s, transform .3s; }
.steps li.on i { background: var(--red); color: #fff; transform: scale(1.08); }
.steps b { display: block; font: 800 17px/1.2 var(--sans); }
.steps span { display: block; margin-top: 2px; font: 600 13.5px/1.35 var(--sans); color: var(--ink-70); }

/* the end: score, coupon, leaderboard */
.end { padding: 24px 24px 20px; }
.end h2 { margin: 6px 0 12px; }
.score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.score div { padding: 11px 6px 10px; border-radius: 16px; background: var(--pearl); }
.score b { display: block; font: 900 24px/1 var(--sans); color: var(--red); }
.score small { display: block; margin-top: 5px; font: 800 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); }
.coupon { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px 12px 18px; border-radius: 18px; background: var(--red); color: #fff; text-align: left; box-shadow: 0 12px 24px rgba(120,0,20,.3); }
.coupon[hidden] { display: none; }
.coupon::before, .coupon::after { content: ''; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; }
.coupon::before { left: -9px; } .coupon::after { right: -9px; }
.c-off small { display: block; font: 800 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.c-off b { display: block; margin-top: 4px; font: 900 30px/1 var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.c-right { flex: 1; }
.c-right > span { display: block; margin-top: 6px; font: 700 10.5px/1 var(--sans); letter-spacing: .08em; text-align: center; opacity: .9; }
.code { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 12px; border: 2px dashed rgba(255,255,255,.7); border-radius: 12px; }
.code code { font: 800 14px/1 var(--sans); letter-spacing: .1em; }
.code button { height: 30px; padding: 0 12px; border-radius: 9px; background: #fff; color: var(--red); font: 800 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.name { display: flex; gap: 8px; margin-top: 12px; }
.name input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 2px solid rgba(22,23,22,.12); border-radius: 14px; font: 600 14px/1 var(--sans); color: var(--ink); outline: none; user-select: text; -webkit-user-select: text; }
.name input:focus { border-color: var(--red); }
.name button { height: 42px; padding: 0 16px; border-radius: 14px; background: var(--ink); color: #fff; font: 800 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.name.saved button { background: #1f9d55; }
.board { margin: 10px 0 4px; padding: 0; list-style: none; text-align: left; }
.board li { display: grid; grid-template-columns: 26px 1fr auto 52px; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px; border-radius: 12px; font: 700 13px/1 var(--sans); }
.board li:nth-child(odd) { background: var(--pearl); }
.board li i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(22,23,22,.08); font: 900 11px/1 var(--sans); font-style: normal; }
.board li:nth-child(1) i { background: #F2C14E; color: #3a2400; } .board li:nth-child(2) i { background: #D7DCE0; } .board li:nth-child(3) i { background: #E2B48C; }
.board li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li em { font: 900 13px/1 var(--sans); font-style: normal; color: var(--red); }
.board li small { font: 700 12px/1 var(--sans); color: var(--ink-70); text-align: right; }
.board li.me { background: var(--red) !important; color: #fff; box-shadow: 0 8px 16px rgba(120,0,20,.3); }
.board li.me i { background: #fff; color: var(--red); } .board li.me em, .board li.me small { color: #fff; }
.board li.gap { height: 14px; background: none !important; justify-content: center; display: flex; font-size: 14px; color: var(--ink-70); }
.end .btn { height: 50px; margin-top: 8px; }
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.petals i { position: absolute; top: -30px; left: var(--x); width: var(--s); height: calc(var(--s) * .8); border-radius: 60% 0 60% 0; background: var(--c); opacity: .95; animation: fall var(--t) linear var(--d) infinite; }
@keyframes fall { to { transform: translate(var(--dx), 1010px) rotate(var(--r)); } }

/* round done: a bouncing tick in a ring of gold rays, and a peek at the products that join next */
.tick { position: relative; }
.tick svg { position: relative; }
.tick .rays { position: absolute; inset: -38px; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(rgba(232,176,74,.6) 0 9deg, rgba(232,176,74,0) 9deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 70%); mask: radial-gradient(circle, #000 28%, transparent 70%); animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
#roundup.on .tick { animation: tickIn .7s cubic-bezier(.3,1.6,.5,1) .1s both; }
@keyframes tickIn { from { transform: scale(0) rotate(-40deg); } }
.ru-new { display: flex; justify-content: center; align-items: flex-end; gap: 12px; height: 70px; margin-top: 12px; }
.ru-new img { width: 50px; height: 66px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 8px 8px rgba(60,20,20,.25)); }
#roundup.on .ru-new img { animation: ruPop .6s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(.4s + var(--i) * .12s); }
@keyframes ruPop { from { transform: translateY(24px) scale(.3); opacity: 0; } }

/* between rounds: the red wipe */
.wipe { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; color: #fff; text-align: center; visibility: hidden;
  background: radial-gradient(circle at 50% 45%, #E3324A 0, #C11F33 40%, #8E1424 100%); clip-path: circle(0 at 50% 52%); }
.wipe.on { visibility: visible; animation: wipe 1.9s cubic-bezier(.6,0,.25,1) both; }
.wipe.hold { visibility: visible; clip-path: circle(120% at 50% 52%); }
@keyframes wipe { 0% { clip-path: circle(0 at 50% 52%); } 28%, 70% { clip-path: circle(120% at 50% 52%); opacity: 1; } 100% { clip-path: circle(120% at 50% 52%); opacity: 0; } }
.wp-in em { display: block; font: italic 500 46px/1 var(--serif); }
.wp-in b { display: block; margin: -10px 0 4px; font: 900 220px/1 var(--sans); letter-spacing: -.05em; text-shadow: 0 20px 44px rgba(60,0,10,.35); }
.wp-in span { display: inline-block; padding: 11px 20px; border-radius: 24px; background: #fff; color: var(--red); font: 900 15px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 22px rgba(60,0,10,.3); }
.wipe.on .wp-in { animation: wpIn 1.9s var(--ease) both; }
@keyframes wpIn { 0%, 12% { transform: scale(.5); opacity: 0; } 34% { transform: scale(1.06); opacity: 1; } 44%, 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
.wp-s { position: absolute; width: 28px; height: 28px; background: #fff; opacity: 0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.wp-s.s1 { left: 84px; top: 290px; } .wp-s.s2 { right: 80px; top: 250px; width: 18px; height: 18px; } .wp-s.s3 { left: 116px; bottom: 290px; width: 16px; height: 16px; } .wp-s.s4 { right: 104px; bottom: 320px; }
.wipe.on .wp-s { animation: twinkle 1.9s ease-in-out both; } .wipe.on .s2 { animation-delay: .12s; } .wipe.on .s3 { animation-delay: .2s; } .wipe.on .s4 { animation-delay: .06s; }
.wipe.hold .wp-s { opacity: 1; }
@keyframes twinkle { 0%, 22% { opacity: 0; transform: scale(.2); } 42% { opacity: 1; transform: scale(1.15) rotate(45deg); } 70% { opacity: .9; transform: scale(.9) rotate(90deg); } 100% { opacity: 0; transform: scale(.3) rotate(120deg); } }
#confetti { position: absolute; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
#confetti i { position: absolute; left: 0; top: 0; }

/* products floating round the leaderboard and the shop */
.floaters { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sheet .card { z-index: 1; }
.fl { position: absolute; width: auto; transform: rotate(var(--r)); filter: drop-shadow(0 16px 14px rgba(40,0,10,.38)); animation: floaty 4.6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-12px) rotate(calc(var(--r) * -.4)); } }
#end .f1 { left: 2px; top: 118px; height: 120px; --r: -14deg; }
#end .f2 { right: -4px; top: 128px; height: 66px; --r: 12deg; animation-delay: -1.5s; }
#end .f3 { left: 4px; bottom: 44px; height: 92px; --r: 16deg; animation-delay: -.8s; }
#end .f4 { right: -2px; bottom: 60px; height: 66px; --r: -10deg; animation-delay: -2.4s; }
#shopSheet .f1 { left: 0; top: 120px; height: 120px; --r: -12deg; }
#shopSheet .f2 { right: -6px; top: 140px; height: 64px; --r: 10deg; animation-delay: -1.2s; }
#shopSheet .f3 { left: -4px; bottom: 120px; height: 100px; --r: 14deg; animation-delay: -2s; }
#shopSheet .f4 { right: -4px; bottom: 140px; height: 60px; --r: -8deg; animation-delay: -.6s; }

/* leaderboard: how many played, the top score, and every player in a scrolling list (your row stays in view) */
.b-stats { display: flex; gap: 8px; margin-top: 12px; }
.b-stats span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 12px; background: #FFF1F3; color: var(--ink); font: 700 12px/1 var(--sans); white-space: nowrap; }
.b-stats svg { width: 16px; height: 16px; color: var(--red); }
.b-stats b { font-weight: 900; color: var(--red); }
.b-wrap { position: relative; max-height: 202px; margin: 8px 0 4px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(193,31,51,.4) transparent; }
.b-wrap .board { margin: 0; }
.board li.me { position: sticky; top: 0; bottom: 0; z-index: 1; }

/* shop the products: a coupon ticket and four little shop fronts */
#shopSheet { background: radial-gradient(circle at 50% 42%, rgba(193,31,51,.5), rgba(50,0,10,.72) 75%); }
.card.shop { padding: 26px 22px 20px; }
.ticket { position: relative; margin: 6px 0 16px; padding: 12px 16px 13px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #DA2D45, #9E1729);
  box-shadow: 0 12px 22px rgba(120,0,20,.32), inset 0 1px 0 rgba(255,255,255,.25); outline: 2px dashed rgba(255,255,255,.45); outline-offset: -8px; }
.ticket::before, .ticket::after { content: ''; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; }
.ticket::before { left: -9px; } .ticket::after { right: -9px; }
.ticket[hidden] { display: none; }
.ticket small { display: block; font: 800 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.ticket b { display: block; margin: 6px 0 5px; font: 900 26px/1 var(--sans); letter-spacing: .08em; }
.ticket span { font: 600 12px/1 var(--sans); opacity: .92; }
.shops { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin: 4px 0 12px; perspective: 700px; }
.store { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; height: 116px; padding: 0 12px 13px; border-radius: 18px; overflow: hidden;
  text-decoration: none; color: var(--ink); text-align: left; background: linear-gradient(180deg, #fff 30%, #FBF4F2);
  box-shadow: 0 6px 0 #E6D6D3, 0 16px 24px rgba(60,10,20,.24), inset 0 0 0 2px rgba(193,31,51,.08);
  transform: rotateX(12deg); transform-origin: 50% 100%; transition: transform .2s var(--ease), box-shadow .2s; }
#shopSheet.on .store { animation: storeIn .7s cubic-bezier(.3,1.5,.5,1) both; }
#shopSheet.on .store:nth-child(2) { animation-delay: .07s; } #shopSheet.on .store:nth-child(3) { animation-delay: .14s; } #shopSheet.on .store:nth-child(4) { animation-delay: .21s; }
@keyframes storeIn { from { transform: rotateX(70deg) translateY(30px); opacity: 0; } }
.store:active { transform: rotateX(0) translateY(5px); box-shadow: 0 1px 0 #E6D6D3, 0 6px 12px rgba(60,10,20,.2), inset 0 0 0 2px rgba(193,31,51,.12); }
.awning { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: repeating-linear-gradient(90deg, var(--red) 0 18px, #fff 18px 36px); filter: drop-shadow(0 4px 4px rgba(120,0,20,.22)); }
.awning::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px;
  background: radial-gradient(circle at 9px 0, var(--red) 8.5px, transparent 9px) 0 0 / 36px 9px repeat-x, radial-gradient(circle at 27px 0, #fff 8.5px, transparent 9px) 0 0 / 36px 9px repeat-x; }
.store img { position: absolute; right: 6px; bottom: 8px; height: 66px; transform: rotate(8deg); filter: drop-shadow(0 8px 8px rgba(60,20,20,.25)); }
.store b { position: relative; font: 900 18px/1 var(--sans); }
.store span { position: relative; display: flex; align-items: center; gap: 4px; margin-top: 6px; font: 800 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.store span svg { width: 12px; height: 12px; }
.store::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%); transform: translateX(-130%); animation: shine 3.6s ease-in-out infinite; pointer-events: none; }
.store:nth-child(2)::after { animation-delay: .45s; } .store:nth-child(3)::after { animation-delay: .9s; } .store:nth-child(4)::after { animation-delay: 1.35s; }
@keyframes shine { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }

/* the shared link marks the game as a concept, so nobody mistakes it for a live Olay promotion */
.start-bar .concept { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 12px; background: rgba(22,23,22,.45); opacity: 1; }
.start-bar .concept[hidden] { display: none; }

/* the social reel */
.r-hand { z-index: 20; }
.r-cap { position: absolute; left: 50%; top: 104px; z-index: 21; padding: 11px 18px 12px; border-radius: 16px; background: #fff; color: var(--ink); font: 900 20px/1.1 var(--sans);
  white-space: nowrap; box-shadow: 0 14px 28px rgba(40,0,10,.3); transform: translate(-50%, -12px) scale(.9); opacity: 0; transition: opacity .25s, transform .35s var(--ease); pointer-events: none; }
.r-cap.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.r-cap b { color: var(--red); }
.r-end { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center;
  background: radial-gradient(circle at 50% 40%, #E3324A, #C11F33 45%, #8E1424); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.r-end.on { opacity: 1; visibility: visible; transition: opacity .4s; }
.r-end img { width: 120px; }
.r-end em { margin-top: 12px; font: italic 500 26px/1 var(--serif); }
.r-end h3 { margin: 14px 0 0; font: 900 62px/.92 var(--sans); letter-spacing: -.02em; text-transform: uppercase; }
.r-end h3 span { display: block; }
.r-end h3 b { display: inline-block; margin-top: 8px; padding: 6px 16px 8px; border-radius: 10px; background: #fff; color: var(--red); transform: rotate(-2deg); }
.r-end p { margin: 22px 0 26px; font: 700 18px/1.4 var(--sans); opacity: .95; }
.r-cta { padding: 18px 46px; border-radius: 32px; background: #fff; color: var(--red); font: 900 18px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 16px 30px rgba(60,0,10,.35); }
.r-end.on .r-cta { animation: playPulse 1.4s ease-in-out infinite; }
.r-end small { margin-top: 16px; font: 800 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.r-end.on > * { animation: rise .6s var(--ease) both; } .r-end.on > :nth-child(2) { animation-delay: .06s; } .r-end.on > :nth-child(3) { animation-delay: .12s; }
.r-end.on > :nth-child(4) { animation-delay: .18s; } .r-end.on > :nth-child(6) { animation-delay: .3s; }
@keyframes rise { from { transform: translateY(26px); opacity: 0; } }

body.still * { animation-play-state: paused !important; }
body.still .start-bar .btn, body.still .knock i::before, body.still .knock i::after, body.still .count, body.still .banner, body.still .shout, body.still .prod img, body.still .btn.pulse, body.still .dp img, body.still .d-hand, body.still .d-label, body.still .clue, body.still .placed, body.still .placed b, body.still .prod::before, body.still .fl, body.still .ru-new img, body.still .tick,
body.still .tick .rays, body.still .store, body.still .store::after, body.still .wp-in, body.still .wp-s { animation: none !important; }