* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f3dcb8; overscroll-behavior: none; }
body { font-family: "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Noto Color Emoji"; color: #3b2a1a; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: inherit; font-family: "Trebuchet MS", system-ui, sans-serif, "Noto Color Emoji"; color: inherit; cursor: pointer; border: 0; }
.hidden { display: none !important; }

#hud { position: fixed; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; gap: 8px; padding: calc(env(safe-area-inset-top) + 8px) 10px 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#dist { min-width: 74px; font-weight: 800; font-size: 30px; line-height: 44px; color: #fff; text-shadow: 0 2px 0 rgba(60,30,10,.5), 0 0 8px rgba(60,30,10,.3); }
#dist small { font-size: 16px; margin-left: 2px; }
#map { flex: 1; min-width: 0; max-width: 520px; margin: 6px auto 0; }
#mapBar { position: relative; height: 10px; border-radius: 6px; background: rgba(255,255,255,.55); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); overflow: visible; }
#mapBar::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(90deg, #f0b46a 0 10%, #8ec3c9 10% 49%, #8fc46a 49% 100%); opacity: .55; }
#mapBest { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; background: #ff7a3d; border-radius: 2px; left: 0; }
#mapNow { position: absolute; top: -3px; width: 16px; height: 16px; margin-left: -8px; left: 0; background: #fff; border: 3px solid #3b2a1a; border-radius: 50% 50% 50% 0; transform: rotate(45deg); }
#mapNames { position: relative; height: 16px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
#mapNames span { position: absolute; top: 3px; white-space: nowrap; transform: translateX(-2px); }
.right { display: flex; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border-radius: 22px; background: rgba(255,250,240,.9); font-weight: 800; box-shadow: 0 2px 0 rgba(60,30,10,.2); }
.icon { width: 44px; height: 44px; border-radius: 22px; background: rgba(255,250,240,.9); font-size: 20px; box-shadow: 0 2px 0 rgba(60,30,10,.2); }

.card { position: fixed; left: 50%; transform: translateX(-50%); width: min(92vw, 420px); background: #fffaf0; border-radius: 18px; padding: 14px 16px; box-shadow: 0 6px 0 rgba(90,60,30,.25), 0 10px 30px rgba(0,0,0,.15); background-image: repeating-linear-gradient(transparent 0 25px, rgba(70,110,200,.13) 25px 26px); }
#title { top: calc(env(safe-area-inset-top) + 64px); text-align: center; pointer-events: none; transition: opacity .25s; }
#title button, #title a, #title [data-wefav-mark] { pointer-events: auto; }
#title.fade { opacity: 0; pointer-events: none; }
#title h1 { margin: 2px 0 2px; font-size: 32px; letter-spacing: -0.5px; color: #2f4f7a; }
#title .tag { margin: 0 0 6px; font-weight: 700; }
.hint, .tip { margin: 4px 0; font-size: 14px; line-height: 1.35; }
.tip { color: #7a5a3a; font-size: 13px; }
.t-mouse, .t-pad { display: none; }
body.mouse .t-touch { display: none; } body.mouse .t-mouse { display: block; }
body.pad .t-touch, body.pad .t-mouse { display: none; } body.pad .t-pad { display: block; }
[data-wefav-mark] { display: inline-block; min-height: 14px; font-size: 11px; }

button.big { white-space: nowrap; min-height: 48px; padding: 0 18px; border-radius: 14px; background: #ff7a3d; color: #fff; font-weight: 800; font-size: 18px; box-shadow: 0 4px 0 #b9501f; }
button.big.alt { background: #4c8fd6; box-shadow: 0 4px 0 #2d5f99; }
button.big:active { transform: translateY(2px); box-shadow: 0 2px 0 #b9501f; }
button.small { min-height: 44px; padding: 0 14px; border-radius: 12px; background: #f1e3c8; font-weight: 700; font-size: 15px; }
button:focus-visible, .focus { outline: 3px solid #2f4f7a; outline-offset: 2px; }
.row { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.row button { flex: 1; }
.badge { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; border-radius: 10px; background: #fff; color: #ff7a3d; font-size: 13px; margin-left: 4px; }

#result { top: calc(env(safe-area-inset-top) + 64px); text-align: center; max-height: calc(100% - 74px); overflow-y: auto; }
#result h2 { margin: 0; font-size: 44px; color: #2f4f7a; }
#result.arrived h2 { color: #c8891a; }
#resWhere { margin: 0; font-weight: 700; color: #7a5a3a; }
#resBest { margin: 0 0 4px; font-weight: 800; color: #ff7a3d; min-height: 1em; }
/* round 14: payday */
#payday { margin: 4px -6px 2px; padding: 6px 8px 8px; border-radius: 14px; background: linear-gradient(#fff3c9, #ffe49a); box-shadow: inset 0 0 0 2px #f0c35a; position: relative; }
#payRows { display: flex; justify-content: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
#payRows .pr { background: rgba(255,255,255,.7); padding: 3px 9px; border-radius: 8px; font-weight: 700; color: #6b5338; opacity: 0; transform: translateY(-8px) scale(.9); transition: opacity .2s, transform .25s cubic-bezier(.2,1.6,.4,1); }
#payRows .pr.in { opacity: 1; transform: none; }
#payRows b { color: #2e7d32; }
#earn { display: flex; align-items: center; justify-content: center; gap: 2px; font-weight: 900; color: #c76a00; line-height: 1; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
#earn .plus { font-size: 34px; }
#earn b { font-size: 52px; letter-spacing: -1px; text-shadow: 0 3px 0 #f6b84a, 0 0 18px rgba(255,190,60,.6); }
#earn .clip { font-size: 34px; margin-left: 4px; display: inline-block; animation: clipWiggle .5s ease-in-out infinite alternate; }
#earn.big b { font-size: 60px; }
#earn.done b { animation: earnPop .45s cubic-bezier(.2,1.8,.4,1); }
#earn.done .clip { animation: none; }
@keyframes earnPop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-4deg); } 100% { transform: scale(1); } }
@keyframes clipWiggle { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
#goal { font-size: 14px; font-weight: 700; color: #6b5338; }
#goal .gbar { position: relative; height: 22px; margin: 4px 6px 3px; border-radius: 11px; background: rgba(110,80,40,.18); overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,.08); }
#goal .gbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 11px; background: linear-gradient(#7fd36b, #3ea544); }
#goal .gnum { position: relative; font-size: 12px; line-height: 22px; font-weight: 800; color: #2d3a1c; }
#goal .gt b { color: #2f4f7a; }
#goal em { font-style: normal; font-size: 11px; background: #ff7a3d; color: #fff; padding: 1px 6px; border-radius: 6px; vertical-align: 1px; }
#payday.ready #goal .gbar i, #payday.crossed #goal .gbar i { background: linear-gradient(90deg, #ffd34d, #ffb000, #ffd34d); background-size: 200% 100%; animation: shine 1.2s linear infinite; }
#payday.crossed { animation: glow 1s ease-in-out 3; }
@keyframes shine { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes glow { 50% { box-shadow: inset 0 0 0 2px #f0c35a, 0 0 0 6px rgba(255,200,60,.45), 0 0 26px rgba(255,180,0,.7); } }
#toShop { position: relative; overflow: hidden; }
#toShop.ready { background: linear-gradient(#ffb21e, #ff8a00); box-shadow: 0 4px 0 #b25e00, 0 0 0 0 rgba(255,170,0,.6); animation: readyPulse 1.1s ease-in-out infinite; }
#toShop.ready::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); animation: sweep 1.6s ease-in-out infinite; }
@keyframes readyPulse { 50% { filter: brightness(1.12); box-shadow: 0 4px 0 #b25e00, 0 0 0 8px rgba(255,170,0,.3), 0 0 22px rgba(255,170,0,.8); } }
#toShop.ready .badge { animation: badgeHop .55s ease-in-out infinite alternate; }
@keyframes badgeHop { to { transform: translateY(-4px) scale(1.15); } }
@keyframes sweep { 0% { left: -60%; } 60%, 100% { left: 130%; } }
#bank.bump { animation: bankBump .28s cubic-bezier(.2,1.8,.4,1); }
@keyframes bankBump { 40% { transform: scale(1.28); background: #fff1b8; } }
#fly { position: fixed; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
#fly .fc { position: absolute; left: 0; top: 0; margin: -12px 0 0 -12px; font-size: 24px; will-change: transform; }
#fly .fc.burst { font-size: 20px; color: #ffb000; }
#ready { position: fixed; left: 50%; top: 22%; transform: translate(-50%, -50%) rotate(-4deg); z-index: 7; pointer-events: none; text-align: center; font-size: 36px; font-weight: 900; color: #fff;
  padding: 10px 26px 12px; border-radius: 18px; background: linear-gradient(#ffb21e, #ff7a00); border: 3px solid #fff; box-shadow: 0 6px 0 #b25e00, 0 0 0 6px rgba(255,190,0,.35), 0 0 40px rgba(255,170,0,.8);
  text-shadow: 0 3px 0 #b25e00; white-space: nowrap; animation: readyIn 1.9s ease-out forwards; }
#ready small { display: block; font-size: 19px; text-shadow: 0 2px 0 #b25e00; }
#ready.hidden { display: none; }
@keyframes readyIn { 0% { transform: translate(-50%, -50%) rotate(-16deg) scale(2.2); opacity: 0; } 15% { transform: translate(-50%, -50%) rotate(-2deg) scale(.95); opacity: 1; } 22% { transform: translate(-50%, -50%) rotate(-4deg) scale(1.05); } 82% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); } 100% { transform: translate(-50%, -70%) rotate(-4deg) scale(.9); opacity: 0; } }
@media (max-width: 500px) { #ready { font-size: 30px; } #ready small { font-size: 17px; } #earn b { font-size: 46px; } #earn.big b { font-size: 52px; } }
@media (prefers-reduced-motion: reduce) { #toShop.ready, #toShop.ready::after, #toShop.ready .badge, #earn .clip, #payday.crossed { animation: none; } }
#vote { margin-top: 8px; }
#starts { margin: 6px 0 2px; }
#starts p { margin: 2px 0 4px; font-size: 13px; font-weight: 700; color: #6b5338; }
#starts .opts { display: flex; gap: 6px; overflow-x: auto; justify-content: center; flex-wrap: wrap; }
#starts .opts button { flex: none; min-height: 40px; padding: 0 11px; border-radius: 12px; background: #f1e3c8; font-size: 14px; font-weight: 700; border: 2px solid transparent; }
#starts .opts button.on { background: #ffd877; border-color: #b8862b; }
#vote p { margin: 4px 0; font-size: 14px; font-weight: 700; }
#vote .opts { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
#vote .opts button { flex: none; min-height: 44px; padding: 0 12px; border-radius: 12px; background: #e9f0fa; font-size: 14px; font-weight: 700; }
.door { margin-top: 6px; background: #efe5ff !important; }
#doorNoted { font-size: 13px; }
[data-wefav-row] { margin-top: 8px; }
#share { margin-top: 2px; }

#shop { top: calc(env(safe-area-inset-top) + 64px); text-align: center; max-height: calc(100% - 74px); overflow-y: auto; }
#shop h2, #settings h2, #paused h2 { margin: 0 0 4px; color: #2f4f7a; }
.bankLine { margin: 0 0 8px; font-weight: 800; }
#cards { display: grid; gap: 8px; margin-bottom: 10px; }
.up { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; text-align: left; padding: 10px 12px; border-radius: 14px; background: #f6ecd8; border: 2px solid transparent; min-height: 64px; }
.up .tree { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #7a5a3a; }
.up .name { font-weight: 800; font-size: 17px; }
.up .lvl { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.up .lvl i { width: 10px; height: 6px; border-radius: 3px; background: #dcc9a6; }
.up .lvl i.on { background: #ff7a3d; }
.up .what { font-size: 13px; color: #6a5038; }
.up .buy { grid-row: 1 / span 3; grid-column: 2; min-width: 84px; min-height: 48px; border-radius: 12px; background: #ff7a3d; color: #fff; font-weight: 800; box-shadow: 0 3px 0 #b9501f; }
.up .buy:disabled { background: #cdbb9c; box-shadow: 0 3px 0 #a8946f; cursor: default; }
.up.sel { border-color: #2f4f7a; }

#settings, #paused { top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 5; }
.toggle { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 44px; margin: 8px 0; font-weight: 700; text-align: left; }
.toggle input { width: 24px; height: 24px; }

#power { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 24%); width: 18px; height: 160px; border-radius: 9px; background: rgba(255,255,255,.5); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
#power i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 9px; background: linear-gradient(0deg, #8fc46a, #f2c14e 60%, #ff7a3d); }
#power span { position: absolute; top: 166px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
#pullHint { position: fixed; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 3px solid #fff; background: rgba(255,255,255,.3); pointer-events: none; animation: pull 1.6s ease-in-out infinite; box-shadow: 0 0 10px rgba(0,0,0,.25); }
@keyframes pull { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(0, 110px); opacity: 1; } 100% { transform: translate(0, 110px); opacity: 0; } }
#stick { position: fixed; width: 120px; height: 120px; margin: -60px; border-radius: 50%; border: 3px solid rgba(255,255,255,.7); background: rgba(255,255,255,.12); pointer-events: none; }
#stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
#toast { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); padding: 8px 16px; border-radius: 14px; background: rgba(255,250,240,.95); font-weight: 800; font-size: 22px; color: #2f4f7a; box-shadow: 0 4px 0 rgba(90,60,30,.25); pointer-events: none; white-space: normal; width: max-content; max-width: calc(100vw - 32px); text-align: center; box-sizing: border-box; animation: pop .25s ease-out; }
@keyframes pop { from { transform: translateX(-50%) scale(.7); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

@media (min-width: 900px) and (pointer: fine) {
  #title, #result, #shop { width: 460px; }
  #result { width: 600px; }
}
@media (max-height: 500px) { #title .tip { display: none; } #title { top: 56px; } }
#mapHere { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); margin-top: 4px; text-align: center; }
@media (max-width: 640px) { #mapNames { display: none; } #mapHere { display: block; } #dist { min-width: 60px; font-size: 26px; } .chip { padding: 0 9px; } #hud { gap: 6px; padding-left: 8px; padding-right: 8px; } .right { gap: 4px; } }
.up .next { font-size: 12px; color: #8a6a48; margin-top: 2px; }
.up .lvl i.tier { box-shadow: 0 0 0 2px #fff7e6, 0 0 0 3px #b9501f; }
/* round 4: the boost button (once you have a motor): bottom right, a ring that empties as the fuel runs out */
#boost { position: fixed; right: calc(env(safe-area-inset-right) + 18px); bottom: calc(env(safe-area-inset-bottom) + 22px); width: 92px; height: 92px; border-radius: 50%; border: 0; padding: 0;
  background: conic-gradient(#ff7a3d calc(var(--fuel, 1) * 360deg), rgba(255,255,255,.35) 0); box-shadow: 0 4px 0 rgba(90,60,30,.3); touch-action: none; user-select: none; -webkit-user-select: none; }
#boost span { position: absolute; inset: 7px; border-radius: 50%; background: rgba(255,250,240,.92); display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #b9501f; line-height: 1.1; }
#boost.on span { background: #ffe0c8; transform: scale(.94); }
#boost.empty span { color: #a8946f; }
#boost small { display: block; font-size: 9px; white-space: nowrap; font-weight: 800; color: #8a6a48; }
body.mouse #boost small::after { content: 'Space'; } body.pad #boost small::after { content: 'A / RT'; } body:not(.mouse):not(.pad) #boost small::after { content: '2nd finger'; }
@media (max-width: 640px) { #boost { width: 80px; height: 80px; } }
#cards .up .what b { color: #b9501f; }

/* the map card (round 5) */
#mapcard { top: calc(env(safe-area-inset-top) + 56px); z-index: 30; text-align: center; max-height: calc(100% - 66px); overflow-y: auto; }
#cardImg { display: block; width: 100%; max-height: 58vh; object-fit: contain; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); margin: 0 auto 10px; }
#mapcard .row { margin-top: 6px; }
#mapcard { box-shadow: 0 0 0 100vmax rgba(40,30,20,.45), 0 10px 30px rgba(0,0,0,.2); }
/* graphics setting (round 7) */
.gfxRow { margin: 12px 0 2px; font-weight: 700; color: #2f4f7a; display: flex; align-items: center; justify-content: center; gap: 10px; }
.seg { display: inline-flex; border-radius: 999px; overflow: hidden; border: 2px solid #2f4f7a33; }
.seg button { border: 0; background: #fff; color: #2f4f7a; font: inherit; font-size: 14px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
.seg button.on { background: #2f4f7a; color: #fff; }
.gfxNote { margin: 2px 0 10px; font-size: 13px; color: #6a6a6a; min-height: 1em; }

/* round 12: the comic word stamped at a crash */
#stamp { position: fixed; left: 50%; top: 24%; transform: translate(-50%, -50%) rotate(-8deg); pointer-events: none; z-index: 6;
  font: 900 64px/1 "Comic Sans MS", "Chalkboard SE", "Marker Felt", system-ui, sans-serif; letter-spacing: 1px; color: #ffd23a;
  -webkit-text-stroke: 3px #3a2a1a; paint-order: stroke fill; text-shadow: 0 5px 0 #3a2a1a, 0 9px 14px rgba(0,0,0,.35);
  animation: stampIn .9s cubic-bezier(.2,1.6,.4,1) both; white-space: nowrap; }
#stamp.k-splash { color: #bfe8ff; }
#stamp.k-snag { color: #b8e07a; font-size: 52px; }
#stamp.k-tumble { color: #ffb15a; }
#stamp.hidden { display: none; }
@keyframes stampIn { 0% { transform: translate(-50%, -50%) rotate(-20deg) scale(2.6); opacity: 0; } 18% { transform: translate(-50%, -50%) rotate(-6deg) scale(.92); opacity: 1; }
  30% { transform: translate(-50%, -50%) rotate(-9deg) scale(1.04); } 75% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; } 100% { transform: translate(-50%, -54%) rotate(-8deg) scale(1.02); opacity: 0; } }
@media (max-width: 500px) { #stamp { font-size: 48px; } #stamp.k-snag { font-size: 40px; } }

/* round 15: the loading screen. Notebook paper, a dart looping along a pencil line, a bar that fills. */
#loading { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #fffaf0;
  background-image: linear-gradient(90deg, transparent 0 calc(12% - 1px), rgba(220,80,80,.35) calc(12% - 1px) 12%, transparent 12%), repeating-linear-gradient(transparent 0 31px, rgba(70,110,200,.16) 31px 32px);
  transition: opacity .5s ease; touch-action: none; }
#loading.gone { opacity: 0; pointer-events: none; }
.ld-in { width: min(86vw, 420px); text-align: center; padding-bottom: 8vh; }
.ld-in h1 { margin: 0 0 18px; font-size: 38px; letter-spacing: -0.5px; color: #2f4f7a; transform: rotate(-2deg); }
.ld-sky { width: 100%; height: auto; overflow: visible; }
.ld-path { stroke: #9a8a74; stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; }
.ld-plane { offset-path: path("M10 92 C 70 20, 120 110, 170 58 S 260 30, 292 44"); offset-rotate: auto; animation: ld-fly 2.6s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes ld-fly { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.ld-bar { height: 14px; margin: 4px 8px 10px; border-radius: 8px; background: #f1e3c8; box-shadow: inset 0 2px 3px rgba(90,60,30,.25); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; border-radius: 8px; background: repeating-linear-gradient(-45deg, #ff7a3d 0 10px, #ff9259 10px 20px); transition: width .25s ease-out; }
#ldWhat { margin: 0; font-weight: 800; font-size: 16px; }
.ld-tip { margin: 8px 0 0; color: #7a5a3a; font-size: 14px; min-height: 2.6em; }
@media (prefers-reduced-motion: reduce) { .ld-plane { animation: none; offset-distance: 60%; } }

/* round 15: the new-tier reveal */
#reveal { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 70px) 16px calc(env(safe-area-inset-bottom) + 40px); cursor: pointer; }
.rv-card { text-align: center; padding: 10px 22px 12px; border-radius: 18px; background: #fffaf0; box-shadow: 0 6px 0 rgba(90,60,30,.25), 0 10px 30px rgba(0,0,0,.15); transform: rotate(-2deg); animation: rv-in .55s cubic-bezier(.2,1.6,.4,1) both; }
.rv-kick { margin: 0; font-weight: 800; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: #ff7a3d; }
.rv-card h2 { margin: 2px 0 2px; font-size: 34px; color: #2f4f7a; }
.rv-line { margin: 0; font-size: 15px; font-weight: 700; max-width: 300px; }
.rv-tap { margin: 0; padding: 8px 16px; border-radius: 20px; background: rgba(255,250,240,.85); font-weight: 800; opacity: 0; transition: opacity .3s; }
#reveal.can .rv-tap { opacity: 1; }
@keyframes rv-in { 0% { transform: scale(.3) rotate(-14deg); opacity: 0; } 100% { transform: scale(1) rotate(-2deg); opacity: 1; } }