/* Message mock-ups for the quiz games. Always light, like a real phone, so they look the same on every screen. */
.mm { --mm-ink: #111b21; --mm-sub: #667781; background: #fff; color: var(--mm-ink); border-radius: 18px; overflow: hidden; border: 1px solid #d9dee2;
  font-family: -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif; font-size: 1rem; line-height: 1.4; text-align: left; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.mm b { font-weight: 600; }
.mm .mm-sub { color: var(--mm-sub); font-size: .8em; }
.mm .av { width: 36px; height: 36px; border-radius: 50%; background: #c7d0d6; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.mm-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #eef1f3; }
.mm-top .app { font-weight: 800; letter-spacing: .02em; }
.sms .mm-top { flex-direction: column; gap: 2px; padding: 14px; text-align: center; }
.bubble { display: inline-block; max-width: 92%; padding: 9px 12px; border-radius: 18px; margin: 10px 12px; }
.bubble.in { background: #e9e9eb; border-bottom-left-radius: 6px; }
.sms .bubble { margin: 14px; }
.wa-top { background: #008069; color: #fff; }
.wa-top .mm-sub { color: #d6efe9; display: block; }
.wa-top .av { background: #dfe5e7; color: #54656f; }
.wa-body { background: #efeae2; padding: 6px 0 10px; }
.wa .bubble.in { background: #fff; border-radius: 0 12px 12px 12px; box-shadow: 0 1px .5px rgba(0,0,0,.13); }
.wa .tm { float: right; font-size: .7em; color: var(--mm-sub); margin: 8px 0 0 10px; }
.em-subject { font-size: 1.15em; font-weight: 700; padding: 14px 16px 4px; }
.em-from { display: flex; gap: 10px; align-items: flex-start; padding: 8px 16px; }
.em-body { padding: 4px 16px 14px; }
.em-body p { margin: 0 0 8px; }
.dm-who { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #eef1f3; }
.dm-body { padding: 4px 0 8px; display: flex; flex-direction: column; align-items: flex-start; }
.dm .bubble { margin: 4px 12px; }
/* Adverts play as a short looping video: presenter, TikTok-style captions and a progress bar. */
.ad-media { position: relative; height: 230px; color: #fff; overflow: hidden; cursor: pointer; user-select: none;
  background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b, #3a1c71); background-size: 300% 300%; animation: adbg 9s ease infinite; }
@keyframes adbg { 50% { background-position: 100% 100%; } }
.ad-face { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 5rem; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); animation: adtalk .42s ease-in-out infinite alternate; }
@keyframes adtalk { from { transform: translate(-50%, -50%) scale(1) rotate(-2deg); } to { transform: translate(-50%, -52%) scale(1.05) rotate(2deg); } }
.ad-cap { position: absolute; left: 10px; right: 10px; bottom: 22px; text-align: center; }
.ad-cap span { display: inline-block; background: rgba(0,0,0,.72); border-radius: 8px; padding: 5px 10px; font-weight: 800; font-size: 1.02em; line-height: 1.25; animation: adpop .3s ease-out; }
@keyframes adpop { from { opacity: 0; transform: translateY(8px) scale(.92); } }
.ad-dur { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.55); border-radius: 6px; padding: 1px 6px; font-size: .72em; font-variant-numeric: tabular-nums; }
.ad-mute { position: absolute; right: 10px; top: 10px; background: rgba(0,0,0,.55); border-radius: 6px; padding: 1px 6px; font-size: .72em; }
.ad-play { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.55); display: none; place-items: center; font-size: 1.6rem; }
.ad-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.3); }
.ad-prog i { display: block; height: 100%; width: 0; background: #fff; transition: width .1s linear; }
.ad-vid.paused, .ad-vid.paused .ad-face { animation-play-state: paused; }
.ad-vid.paused .ad-play { display: grid; }
.ad-body { padding: 10px 14px; }
.ad-cta { margin: 0 14px 14px; padding: 9px; text-align: center; background: #0095f6; color: #fff; border-radius: 8px; font-weight: 700; }
.call-top { background: linear-gradient(180deg, #37474f, #263238); color: #fff; text-align: center; padding: 18px 14px; }
.call-top b { font-size: 1.4em; display: block; margin: 4px 0 10px; }
.call-btns { display: flex; justify-content: center; gap: 40px; font-size: 1.6rem; }
.call-body { padding: 12px 16px 16px; font-style: italic; }
.web-bar { background: #f1f3f4; padding: 8px 12px; display: flex; gap: 8px; align-items: center; font-size: .9em; border-bottom: 1px solid #dadce0; }
.web-bar .z { background: #fff; border-radius: 99px; padding: 3px 12px; flex: 1; }
.web-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.web-h { font-weight: 800; font-size: 1.2em; color: #1b5e20; }

/* Zones: tappable in Spot the Giveaway, highlighted at the reveal. */
.mm .z { border-radius: 6px; transition: background .15s, box-shadow .15s; }
.mm .z.tap { cursor: pointer; background: rgba(31, 111, 209, .08); box-shadow: 0 0 0 1px rgba(31, 111, 209, .25); padding: 1px 2px; }
.mm .z.tap:hover { background: rgba(31, 111, 209, .18); }
.mm .z.picked { background: #ffe58f !important; box-shadow: 0 0 0 2px #f5a623 !important; }
.mm .z.clue { background: #ffd4d4 !important; box-shadow: 0 0 0 2px #e53935 !important; animation: cluepulse 1.2s ease-in-out 3; }
@keyframes cluepulse { 50% { box-shadow: 0 0 0 5px rgba(229, 57, 53, .35); } }