/* Title screen (title.js). */
.title-drift-a { left: 50%; margin-left: -55px; animation: title-drift-a 60s linear infinite alternate; }
.title-drift-b { left: 50%; margin-left: -40px; animation: title-drift-b 45s linear infinite alternate; }
@keyframes title-drift-a { from { transform: translateX(calc(var(--W) * -.6)); } to { transform: translateX(calc(var(--W) * .6)); } }
@keyframes title-drift-b { from { transform: translateX(calc(var(--W) * .5)); } to { transform: translateX(calc(var(--W) * -.5)); } }
.title-hills { position: absolute; left: 0; right: 0; bottom: 0; }

.title-group { position: absolute; left: 0; right: 0; height: 0; }
.title-knoll { position: absolute; left: 50%; top: -66px; width: calc(var(--W) * 1.5); height: calc(var(--H) * .6); margin-left: calc(var(--W) * -.75); border-radius: 50%; background: radial-gradient(ellipse 60% 40% at 45% 0%, #b4e397, transparent 70%), linear-gradient(#97d47a, #6fb356 45%); box-shadow: 0 -4px 14px rgba(0,0,0,.10); }
.title-house { position: absolute; left: 50%; bottom: 60px; margin-left: -90px; width: 180px; height: 154px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); }
.title-path { position: absolute; left: 50%; bottom: -6px; width: 300px; height: 44px; margin-left: -150px; border-radius: 50%; background: radial-gradient(ellipse at 45% 35%, #f4e3bf, #E8D3A8 60%, #d9c08d); box-shadow: inset 0 -3px 6px rgba(0,0,0,.08); }
.title-friend { position: absolute; filter: drop-shadow(0 5px 4px rgba(0,0,0,.18)); }
.title-cabbage { position: absolute; left: 50%; bottom: 0; width: 108px; height: 108px; transform: translateX(-50%); border-radius: 50%; filter: drop-shadow(0 7px 6px rgba(0,0,0,.2)); }
.title-spin { transition: transform .9s cubic-bezier(.3, 1.3, .5, 1); }
.title-wiggle { animation: title-wiggle 1.2s ease-in-out infinite alternate; }
@keyframes title-wiggle { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.title-bubble { position: absolute; left: 50%; bottom: 100%; margin-bottom: 4px; transform: translateX(-50%); transform-origin: 50% 100%; animation: title-bubble-in .3s var(--spring) both; z-index: 3; }
@keyframes title-bubble-in { from { transform: translateX(-50%) scale(.4); opacity: 0; } }

.title-column { position: absolute; inset: 0; padding: 34px 20px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.title-column > * { pointer-events: auto; }
.title-spacer { flex: 1; pointer-events: none; }
.title-pills { display: flex; gap: 10px; align-items: center; }
.title-chips { display: flex; gap: 14px; margin-top: 2px; }
.title-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.title-chip-disc { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: radial-gradient(circle at 38% 30%, #fff, #f1f7fb); box-shadow: inset 0 0 0 3px #5BB8F0, 0 3px 0 #4081a8, 0 7px 8px rgba(0,0,0,.2); }
.title-made { color: #fff; font-size: 13px; font-weight: 900; text-shadow: 0 1.5px 0 rgba(63,99,53,.7); margin-top: 2px; }
.title-play .candy-label { padding: 4px 0; }
.title-play { animation: title-pulse 1.6s ease-in-out infinite alternate; }
@keyframes title-pulse { to { filter: brightness(1.06); scale: 1.025; } }

/* Logo: gold gradient letters, dark green outline, a drop edge and a travelling shine. */
.title-logo { position: relative; font-weight: 900; line-height: 1.08; text-align: center; white-space: pre-line; letter-spacing: -.3px; filter: drop-shadow(0 5px 0 rgba(63,99,53,.9)) drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
.title-logo span { display: block; }
.title-logo-edge { color: #3f6335; -webkit-text-stroke: 7px #3f6335; }
.title-logo-fill, .title-logo-shine { position: absolute; inset: 0; color: transparent; -webkit-background-clip: text; background-clip: text; }
.title-logo-fill { background-image: linear-gradient(#FFF7D6, #FFE38A 50%, #FFC94B); }
.title-logo-shine { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%); background-size: 300% 100%; background-repeat: no-repeat; animation: title-shine 3.5s linear infinite; }
@keyframes title-shine { 0% { background-position: 130% 0; } 70%, 100% { background-position: -30% 0; } }