/* Brainwashing. All rules scoped under .bwsh-* */
.bwsh-sc { position: relative; width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the headline */
.bwsh-paper { width: 100%; padding: 10px 14px 12px; border-radius: 4px; background: #efe8d6; color: #1d1a14; box-shadow: 0 10px 24px rgba(0,0,0,.45); rotate: -2deg; animation: bwshDrop .7s cubic-bezier(.25,.8,.3,1.15) both; }
@keyframes bwshDrop { from { translate: 0 -60px; rotate: 14deg; scale: .6; opacity: 0; } }
.bwsh-mast { font: 900 22px/1 var(--serif); text-align: center; letter-spacing: .02em; border-bottom: 2px solid #1d1a14; padding-bottom: 4px; }
.bwsh-date { font: 600 12px var(--sans); text-align: center; color: #5b5444; border-bottom: 1px solid #1d1a14; padding: 2px 0 3px; margin-bottom: 6px; }
.bwsh-head { margin: 0; font: 900 19px/1.15 var(--serif); }
.bwsh-word { display: inline; min-height: 44px; padding: 0 3px; border: 0; border-radius: 4px; background: #ffe58a; color: #1d1a14; font: inherit; cursor: pointer; box-shadow: 0 0 0 2px #e0b300; }
.bwsh-by { margin-top: 4px; font: 700 12px var(--sans); color: #5b5444; text-transform: uppercase; letter-spacing: .05em; }
.bwsh-cols { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 10px; }
.bwsh-cols i { height: 22px; background: repeating-linear-gradient(#b7ae98 0 2px, transparent 2px 6px); }
.bwsh-split { display: flex; align-items: center; gap: 14px; opacity: 0; translate: 0 -20px; transition: opacity .4s, translate .5s cubic-bezier(.2,.8,.2,1.3); }
.bwsh-sc.split .bwsh-split { opacity: 1; translate: 0 0; }
.bwsh-split div { display: flex; flex-direction: column; align-items: center; width: 84px; padding: 6px 0; border-radius: 12px; background: var(--raised); border: 2px solid var(--gold); }
.bwsh-split b { font: 700 38px/1.1 var(--sans); color: var(--text); }
.bwsh-split span { font: 700 14px var(--sans); color: var(--gold); }
.bwsh-split em { font: 800 24px var(--sans); font-style: normal; color: var(--dim); }

/* the bridge */
.bwsh-bridge { position: relative; width: 100%; height: 290px; overflow: hidden; }
.bwsh-bsvg { position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; overflow: visible; }
.bwsh-water { fill: #1f3d63; }
.bwsh-bank { fill: #4a5a3c; }
.bwsh-deck { stroke: #a07850; stroke-width: 8; fill: none; }
.bwsh-rail { stroke: #c9a27a; stroke-width: 3; fill: none; }
.bwsh-wire { stroke: #9aa0a8; stroke-width: 2; fill: none; }
.bwsh-lab { position: absolute; bottom: 4px; font: 800 13px var(--sans); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.bwsh-l { left: 6px; }
.bwsh-r { right: 6px; }
.bwsh-bridge.home .bwsh-r { color: var(--gold); }
.bwsh-fig { position: absolute; bottom: 46px; left: var(--x, 4%); height: 130px; width: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.bwsh-bridge.go .bwsh-fig:not(.bwsh-stay) { left: calc(var(--x) + 74%); transition: left 1.7s cubic-bezier(.45,.1,.4,1); transition-delay: calc(var(--d) * 90ms); }
.bwsh-stay { z-index: 1; }
.bwsh-bridge.go .bwsh-stay { animation: bwshBack 2.3s ease-in-out both; filter: drop-shadow(0 0 6px var(--gold)); }
@keyframes bwshBack { 0% { left: var(--x); } 40% { left: calc(var(--x) + 24%); } 50% { left: calc(var(--x) + 24%); scale: -1 1; } 100% { left: -40%; scale: -1 1; } }
.bwsh-china { position: absolute; top: 10px; left: 8px; padding: 4px 10px; border-radius: 8px; background: var(--raised); border: 2px solid var(--gold); color: var(--gold); font: 800 14px var(--sans); opacity: 0; transition: opacity .4s 1s; }
.bwsh-bridge.go .bwsh-china { opacity: 1; }
.bwsh-camp .bwsh-china { display: none; }
.bwsh-tags { width: 100%; display: flex; justify-content: space-between; opacity: 0; transition: opacity .4s; }
.bwsh-tags.on { opacity: 1; }
.bwsh-tags span { font: 800 14px var(--sans); }
.bwsh-t1 { color: var(--text); order: 2; }
.bwsh-t2 { color: var(--gold); }

/* what do you picture */
.bwsh-one { flex-direction: row; justify-content: center; gap: 0; }
.bwsh-big { position: static; height: 200px; }
.bwsh-bub { align-self: flex-start; margin-left: -10px; width: 64px; height: 64px; border-radius: 32px; background: #fff; color: #2b2418; font: 900 36px var(--serif); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.35); }

/* the camp */
.bwsh-camp { height: 320px; }
.bwsh-man { position: absolute; bottom: 46px; left: calc(2% + var(--p, 0) * 66%); width: 110px; height: 170px; cursor: grab; touch-action: none; }
.bwsh-man .bwsh-mfig { position: static; display: block; height: 170px; width: auto; margin: 0 auto; }
.bwsh-man::after { content: ''; position: absolute; right: -14px; bottom: 30px; width: 28px; height: 34px; border-radius: 3px; background: #f6f0e1 repeating-linear-gradient(transparent 0 6px, #c9bfa6 6px 7px); box-shadow: 0 3px 6px rgba(0,0,0,.4); opacity: 0; scale: .3; transition: opacity .3s, scale .3s cubic-bezier(.2,.8,.2,1.4); }
.bwsh-man.signed::after { opacity: 1; scale: 1; }
.bwsh-say { position: absolute; top: 0; left: 50%; translate: -50% 0; width: 86%; padding: 8px 12px; border-radius: 14px; background: #fff; color: #2b2418; font: 600 15px/1.3 var(--sans); text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.bwsh-say.on { animation: bwshPop .35s cubic-bezier(.2,.8,.2,1.3); }
@keyframes bwshPop { from { scale: .85; opacity: .2; } }
.bwsh-press { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.bwsh-press .btn { min-height: 44px; }
.bwsh-press .bwsh-done { opacity: .5; }

/* the 21 */
.bwsh-21 { position: relative; width: 100%; height: 170px; border-radius: 14px; background: linear-gradient(90deg, rgba(155,140,255,.10) 0 50%, rgba(79,139,255,.12) 50% 100%); }
.bwsh-cn, .bwsh-us { position: absolute; top: 6px; font: 800 13px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.bwsh-cn { left: 10px; }
.bwsh-us { right: 10px; }
.bwsh-tiny { position: absolute; bottom: auto; top: calc(26px + var(--r) * 46px); left: calc(3% + var(--c) * 6.4%); height: 44px; transition: left .9s cubic-bezier(.45,.1,.4,1); }
.bwsh-tiny.back { left: calc(53% + var(--c) * 6.4%); }

/* the movie */
.bwsh-movie { flex-direction: row; justify-content: center; align-items: center; gap: 14px; perspective: 900px; }
.bwsh-photo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bwsh-photo img { height: 200px; width: auto; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.bwsh-photo small { font: 600 12px var(--sans); color: var(--faint); }
.bwsh-card { position: relative; width: 96px; height: 134px; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,.7,.3,1); }
.bwsh-card.flip { transform: rotateY(180deg); }
.bwsh-cback, .bwsh-cface { position: absolute; inset: 0; border-radius: 9px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bwsh-cback { background: #3a2a8c repeating-linear-gradient(45deg, #4d3bb0 0 6px, #3a2a8c 6px 12px); border: 4px solid #fff; }
.bwsh-cface { transform: rotateY(180deg); }
.bwsh-card .bwsh-cface { transform: none; background: #fff; color: #d0202f; display: grid; place-items: center; }
.bwsh-cface b { position: absolute; top: 6px; left: 8px; font: 800 20px var(--serif); }
.bwsh-cface .bwsh-cq2 { top: auto; left: auto; bottom: 6px; right: 8px; rotate: 180deg; }
.bwsh-cface i { font-style: normal; font-size: 52px; }

/* the radio */
.bwsh-radio { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.bwsh-mic { position: relative; width: 70px; height: 110px; }
.bwsh-mic::before { content: ''; position: absolute; left: 10px; top: 0; width: 50px; height: 72px; border-radius: 25px; background: #c9ccd2 repeating-linear-gradient(#c9ccd2 0 4px, #8a8f98 4px 6px); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.bwsh-mic::after { content: ''; position: absolute; left: 31px; top: 70px; width: 8px; height: 40px; background: #6a6f78; }
.bwsh-mic i { position: absolute; left: 13px; bottom: 0; width: 44px; height: 8px; border-radius: 4px; background: #6a6f78; z-index: 1; }
.bwsh-radio p { margin: 0; font: 600 italic 17px/1.3 var(--serif); color: var(--text); }
.bwsh-radio small { font: 600 13px var(--sans); color: var(--dim); }

@media (max-height: 700px) {
  .bwsh-head { font-size: 17px; }
  .bwsh-cols i { height: 14px; }
  .bwsh-split b { font-size: 30px; }
  .bwsh-bridge { height: 240px; }
  .bwsh-fig { height: 104px; }
  .bwsh-camp { height: 270px; }
  .bwsh-man, .bwsh-man .bwsh-mfig { height: 136px; }
  .bwsh-man { width: 90px; }
  .bwsh-photo img { height: 170px; }
  .bwsh-big { height: 170px; }
  .bwsh-21 { height: 150px; }
  .bwsh-tiny { height: 38px; top: calc(24px + var(--r) * 40px); }
}