From 2296fc1f53fcd3d6dcb97c5dd488d63489422a73 Mon Sep 17 00:00:00 2001
From: gajjug004 <gajjug004@gmail.com>
Date: Tue, 6 Oct 2026 18:10:51 +0530
Subject: [PATCH 1/2] feat: motion polish across player and host screens

Animate the moments players feel: phase changes on the phone, the
locked-in shape and result badge, lobby chips, distribution bars and
a staggered podium. Add press feedback to controls and CTAs, gate
hover styles to real pointers so taps don't leave answers lit, and
keep hover-only actions visible on touch screens.
---
 frontend/src/components/DrainRing.vue        |   2 +-
 frontend/src/components/HostAvatarPicker.vue |   2 +-
 frontend/src/components/ImageField.vue       |   4 +-
 frontend/src/components/QuestionRail.vue     |   4 +-
 frontend/src/index.css                       | 102 +++++-
 frontend/src/pages/Host.vue                  |  49 +--
 frontend/src/pages/Join.vue                  |   2 +-
 frontend/src/pages/Login.vue                 |   2 +-
 frontend/src/pages/Play.vue                  | 315 ++++++++++---------
 frontend/src/pages/ResetPassword.vue         |   2 +-
 frontend/tailwind.config.js                  |   2 +
 11 files changed, 295 insertions(+), 191 deletions(-)

diff --git a/frontend/src/components/DrainRing.vue b/frontend/src/components/DrainRing.vue
index 94453d7..a3e6b5e 100644
--- a/frontend/src/components/DrainRing.vue
+++ b/frontend/src/components/DrainRing.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="relative shrink-0" :style="{ width: `${size}px`, height: `${size}px` }">
 		<div
-			class="drain-ring absolute inset-0 rounded-full transition-[background] duration-100 ease-linear"
+			class="drain-ring absolute inset-0 rounded-full"
 			:style="{
 				'--p': percent,
 				'--drain-color': color,
diff --git a/frontend/src/components/HostAvatarPicker.vue b/frontend/src/components/HostAvatarPicker.vue
index 472373f..8a4fa31 100644
--- a/frontend/src/components/HostAvatarPicker.vue
+++ b/frontend/src/components/HostAvatarPicker.vue
@@ -129,7 +129,7 @@ async function save() {
 	border: 1px solid rgb(var(--haze));
 	border-radius: 999px;
 	color: rgb(var(--paper) / 0.7);
-	transition: 0.15s ease;
+	transition: color 150ms ease, border-color 150ms ease;
 }
 
 .arrow:hover {
diff --git a/frontend/src/components/ImageField.vue b/frontend/src/components/ImageField.vue
index c7d192e..a96cdbd 100644
--- a/frontend/src/components/ImageField.vue
+++ b/frontend/src/components/ImageField.vue
@@ -11,7 +11,7 @@
 			>
 				<img :src="modelValue" alt="" class="max-h-full max-w-full object-contain" />
 				<div
-					class="absolute right-2 top-2 flex gap-1.5 opacity-0 transition focus-within:opacity-100 group-hover:opacity-100"
+					class="absolute right-2 top-2 flex gap-1.5 opacity-0 transition focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100"
 				>
 					<button
 						class="image-action"
@@ -60,6 +60,6 @@ const emit = defineEmits(["update:modelValue"]);
 	border-radius: 999px;
 	background: rgb(var(--night) / 0.85);
 	color: rgb(var(--paper));
-	transition: 0.15s ease;
+	transition: color 150ms ease;
 }
 </style>
diff --git a/frontend/src/components/QuestionRail.vue b/frontend/src/components/QuestionRail.vue
index 5e078fc..7ea1292 100644
--- a/frontend/src/components/QuestionRail.vue
+++ b/frontend/src/components/QuestionRail.vue
@@ -71,7 +71,7 @@
 					</span>
 				</button>
 				<div
-					class="absolute -top-1 right-0 flex gap-0.5 opacity-0 transition focus-within:opacity-100 group-hover:opacity-100"
+					class="absolute -top-1 right-0 flex gap-0.5 opacity-0 transition focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100"
 				>
 					<button
 						class="rail-action"
@@ -140,7 +140,7 @@ function moveBy(index, step) {
 	height: 1.5rem;
 	border-radius: 999px;
 	color: rgb(var(--paper) / 0.5);
-	transition: 0.15s ease;
+	transition: color 150ms ease;
 }
 
 .rail-action:hover {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3370a1f..63d8fd9 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,4 @@
-@import 'frappe-ui/style.css';
+@import "frappe-ui/style.css";
 
 /* RGB channels so Tailwind's opacity modifiers still work. */
 :root {
@@ -13,10 +13,12 @@
 	--on-alert: 10 16 14;
 	--accent: 32 238 160;
 	--ok: 23 176 190;
+	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+	--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 /* Accents are re-derived, not inverted: each must read as small text on a light ground. */
-:root[data-theme='light'] {
+:root[data-theme="light"] {
 	color-scheme: light;
 	--night: 246 251 248;
 	--dusk: 232 244 238;
@@ -29,7 +31,7 @@
 }
 
 @media (prefers-color-scheme: light) {
-	:root:not([data-theme='dark']) {
+	:root:not([data-theme="dark"]) {
 		color-scheme: light;
 		--night: 246 251 248;
 		--dusk: 232 244 238;
@@ -46,7 +48,7 @@ html,
 body {
 	background-color: rgb(var(--night));
 	color: rgb(var(--paper));
-	font-family: 'Instrument Sans', system-ui, sans-serif;
+	font-family: "Instrument Sans", system-ui, sans-serif;
 }
 
 /* Everything sits on the same ground, so one mint ring works everywhere. */
@@ -74,7 +76,7 @@ body {
 	);
 }
 
-.drain-ring[data-urgent='true'] {
+.drain-ring[data-urgent="true"] {
 	animation: drain-pulse 1s ease-in-out infinite;
 }
 
@@ -95,22 +97,31 @@ body {
 	font-size: 0.875rem;
 	line-height: 1.25rem;
 	color: rgb(var(--paper) / 0.7);
-	transition: 0.15s ease;
+	transition:
+		color 150ms ease,
+		border-color 150ms ease,
+		background-color 150ms ease,
+		filter 150ms ease,
+		transform 120ms var(--ease-out);
 }
 
-.ctl:hover:not(:disabled, [data-on='true']) {
+.ctl:active:not(:disabled) {
+	transform: scale(0.97);
+}
+
+.ctl:hover:not(:disabled, [data-on="true"]) {
 	border-color: rgb(var(--paper));
 	color: rgb(var(--paper));
 }
 
-.ctl[data-on='true'] {
+.ctl[data-on="true"] {
 	background: rgb(var(--paper));
 	border-color: rgb(var(--paper));
 	color: rgb(var(--night));
 	font-weight: 600;
 }
 
-.ctl[data-on='true']:hover:not(:disabled) {
+.ctl[data-on="true"]:hover:not(:disabled) {
 	filter: brightness(0.92);
 }
 
@@ -155,7 +166,7 @@ body {
 }
 
 .qz-dialog[open] {
-	animation: dialog-in 0.14s ease-out;
+	animation: dialog-in 200ms var(--ease-out);
 }
 
 @keyframes dialog-in {
@@ -184,12 +195,12 @@ body {
 }
 
 /* the native spinner arrows render light-themed and crowd a short number box */
-.field[type='number'] {
+.field[type="number"] {
 	appearance: textfield;
 }
 
-.field[type='number']::-webkit-inner-spin-button,
-.field[type='number']::-webkit-outer-spin-button {
+.field[type="number"]::-webkit-inner-spin-button,
+.field[type="number"]::-webkit-outer-spin-button {
 	-webkit-appearance: none;
 	margin: 0;
 }
@@ -201,15 +212,76 @@ body {
 }
 
 .podium-rise {
-	animation: podium-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+	animation: podium-rise 600ms var(--ease-out) both;
 }
 
+/* clip, not height: no layout per frame, and the rank number is not squashed */
 @keyframes podium-rise {
 	from {
-		height: 0;
+		clip-path: inset(100% 0 0 0);
+	}
+}
+
+.bar-grow {
+	transform-origin: bottom;
+	animation: bar-grow 400ms var(--ease-out) both;
+}
+
+@keyframes bar-grow {
+	from {
+		transform: scaleY(0);
 	}
 }
 
+.pop-in {
+	animation: pop-in 300ms var(--ease-pop) both;
+}
+
+@keyframes pop-in {
+	from {
+		opacity: 0;
+		transform: scale(0.9);
+	}
+}
+
+.phase-enter-active {
+	transition:
+		opacity 220ms var(--ease-out),
+		transform 220ms var(--ease-out);
+}
+
+.phase-leave-active {
+	transition: opacity 120ms ease;
+}
+
+.phase-enter-from {
+	opacity: 0;
+	transform: translateY(8px);
+}
+
+.phase-leave-to {
+	opacity: 0;
+}
+
+.chip-enter-active {
+	transition:
+		opacity 250ms var(--ease-out),
+		transform 250ms var(--ease-out);
+}
+
+.chip-leave-active {
+	transition: opacity 150ms ease;
+}
+
+.chip-enter-from {
+	opacity: 0;
+	transform: scale(0.95);
+}
+
+.chip-leave-to {
+	opacity: 0;
+}
+
 @media (prefers-reduced-motion: reduce) {
 	*,
 	*::before,
diff --git a/frontend/src/pages/Host.vue b/frontend/src/pages/Host.vue
index c3f466b..443f519 100644
--- a/frontend/src/pages/Host.vue
+++ b/frontend/src/pages/Host.vue
@@ -67,7 +67,7 @@
 					<button class="group" @click="qrFullscreen = true">
 						<AnimatedQr
 							:url="joinUrl"
-							class="size-40 rounded-2xl bg-card p-2 ring-1 ring-haze transition group-hover:scale-105 sm:size-48"
+							class="size-40 rounded-2xl bg-card p-2 ring-1 ring-haze transition group-hover:scale-105 group-active:scale-[0.97] sm:size-48"
 						/>
 						<span
 							class="mt-2 block font-mono text-[11px] uppercase tracking-wider text-paper/35 transition group-hover:text-paper/70"
@@ -91,25 +91,27 @@
 						class="flex w-full max-w-5xl flex-wrap items-center justify-center gap-2.5 p-1"
 					>
 						<!-- not the whole chip: a full-name-sized kick button is too easy to hit by accident -->
-						<div
-							v-for="participant in visibleParticipants"
-							:key="participant.name"
-							class="group relative flex items-center gap-2 rounded-full border border-haze bg-dusk py-1 pl-1 pr-4 text-base font-medium text-paper sm:gap-3 sm:pr-5 sm:text-xl"
-						>
-							<AvatarPic
-								:id="participant.avatar"
-								:nickname="participant.nickname"
-								:size="40"
-							/>
-							<span>{{ participant.nickname }}</span>
-							<button
-								class="absolute -right-1 -top-1 grid size-6 place-items-center rounded-full bg-haze text-sm leading-none text-paper opacity-0 transition hover:bg-ember hover:text-sunk focus-visible:opacity-100 group-hover:opacity-100"
-								:aria-label="`Remove ${participant.nickname}`"
-								@click="kick(participant)"
+						<TransitionGroup name="chip">
+							<div
+								v-for="participant in visibleParticipants"
+								:key="participant.name"
+								class="group relative flex items-center gap-2 rounded-full border border-haze bg-dusk py-1 pl-1 pr-4 text-base font-medium text-paper sm:gap-3 sm:pr-5 sm:text-xl"
 							>
-								×
-							</button>
-						</div>
+								<AvatarPic
+									:id="participant.avatar"
+									:nickname="participant.nickname"
+									:size="40"
+								/>
+								<span>{{ participant.nickname }}</span>
+								<button
+									class="absolute -right-1 -top-1 grid size-6 place-items-center rounded-full bg-haze text-sm leading-none text-paper opacity-0 transition hover:bg-ember hover:text-sunk focus-visible:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100"
+									:aria-label="`Remove ${participant.nickname}`"
+									@click="kick(participant)"
+								>
+									×
+								</button>
+							</div>
+						</TransitionGroup>
 						<div
 							v-if="overflowCount"
 							class="flex items-center rounded-full border border-haze bg-dusk px-4 py-2.5 text-base font-medium text-paper/50 sm:px-5 sm:text-xl"
@@ -191,7 +193,10 @@
 						<div
 							class="podium-rise flex w-full items-start justify-center rounded-t-2xl pt-3 font-mono text-2xl font-bold text-sunk sm:text-3xl"
 							:class="PODIUM_FILL[entry.rank]"
-							:style="{ height: `${180 - (entry.rank - 1) * 45}px` }"
+							:style="{
+								height: `${180 - (entry.rank - 1) * 45}px`,
+								animationDelay: `${PODIUM_DELAY_MS[entry.rank]}ms`,
+							}"
 						>
 							{{ entry.rank }}
 						</div>
@@ -427,7 +432,7 @@
 								</span>
 								<div class="flex flex-1 flex-col justify-end rounded-t-lg bg-dusk">
 									<div
-										class="rounded-t-lg transition-[height] duration-500"
+										class="bar-grow rounded-t-lg"
 										:class="shape.fill"
 										:style="{ height: `${barHeight(shape.id)}%` }"
 									/>
@@ -479,6 +484,8 @@ import { initSound, muted, playCue, toggleMute } from "@/sound";
 import AnimatedQr from "@/components/AnimatedQr.vue";
 
 const PODIUM_FILL = { 1: "bg-gold", 2: "bg-lagoon", 3: "bg-orchid" };
+// third rises first so the winner lands last
+const PODIUM_DELAY_MS = { 1: 600, 2: 250, 3: 0 };
 // remembered so a reload on the podium restores it: get_host_state only auto-finds live sessions
 const HOSTED_SESSION_KEY = "tt_hosted_session";
 // long enough to read the old order before it moves, and to watch the points climb
diff --git a/frontend/src/pages/Join.vue b/frontend/src/pages/Join.vue
index 8308385..9e49db8 100644
--- a/frontend/src/pages/Join.vue
+++ b/frontend/src/pages/Join.vue
@@ -139,7 +139,7 @@
 
 				<button
 					type="submit"
-					class="rounded-2xl bg-brand py-4 font-display text-xl font-extrabold text-sunk transition hover:brightness-110 disabled:opacity-50"
+					class="rounded-2xl bg-brand py-4 font-display text-xl font-extrabold text-sunk transition hover:brightness-110 active:scale-[0.97] disabled:opacity-50 disabled:active:scale-100"
 					:disabled="joining || !ready"
 				>
 					{{ joining ? "Joining…" : "Join game" }}
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index a24715a..286119d 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -126,7 +126,7 @@
 
 				<button
 					type="submit"
-					class="mt-1 rounded-2xl bg-brand py-4 font-display text-xl font-extrabold text-sunk transition hover:brightness-110 disabled:opacity-50"
+					class="mt-1 rounded-2xl bg-brand py-4 font-display text-xl font-extrabold text-sunk transition hover:brightness-110 active:scale-[0.97] disabled:opacity-50 disabled:active:scale-100"
 					:disabled="busy"
 				>
 					{{
diff --git a/frontend/src/pages/Play.vue b/frontend/src/pages/Play.vue
index 22c047e..3ab220c 100644
--- a/frontend/src/pages/Play.vue
+++ b/frontend/src/pages/Play.vue
@@ -78,158 +78,181 @@
 			<p v-if="error" class="px-4 pb-3 text-center text-sm text-alert">{{ error }}</p>
 		</template>
 
-		<main
-			v-else
-			class="flex flex-1 flex-col items-center justify-center gap-5 p-6 text-center"
-		>
-			<template v-if="phase === 'kicked'">
-				<h1 class="font-display text-3xl font-extrabold text-paper">
-					The host removed you
-				</h1>
-				<p class="text-paper/50">No hard feelings. The same PIN gets you back in.</p>
-				<button
-					class="rounded-2xl bg-brand px-7 py-3 font-display text-lg font-extrabold text-sunk"
-					@click="router.replace('/join')"
-				>
-					Back to join
-				</button>
-			</template>
+		<main v-else class="flex flex-1 flex-col items-center justify-center p-6 text-center">
+			<Transition name="phase" mode="out-in" appear>
+				<div :key="phase" class="flex w-full flex-col items-center gap-5">
+					<template v-if="phase === 'kicked'">
+						<h1 class="font-display text-3xl font-extrabold text-paper">
+							The host removed you
+						</h1>
+						<p class="text-paper/50">
+							No hard feelings. The same PIN gets you back in.
+						</p>
+						<button
+							class="rounded-2xl bg-brand px-7 py-3 font-display text-lg font-extrabold text-sunk"
+							@click="router.replace('/join')"
+						>
+							Back to join
+						</button>
+					</template>
 
-			<template v-else-if="phase === 'lobby'">
-				<p class="font-mono text-[11px] uppercase tracking-[0.28em] text-accent">
-					PIN {{ player.pin }}
-				</p>
-				<h1 class="font-display text-5xl font-extrabold text-paper">You're in</h1>
-				<p class="max-w-xs text-paper/50">
-					Spot your name on the big screen. The game starts when the host says go.
-				</p>
-				<p class="font-mono text-sm tabular-nums text-paper/40">
-					{{ participants.length }} in the lobby
-				</p>
-			</template>
+					<template v-else-if="phase === 'lobby'">
+						<p class="font-mono text-[11px] uppercase tracking-[0.28em] text-accent">
+							PIN {{ player.pin }}
+						</p>
+						<h1 class="font-display text-5xl font-extrabold text-paper">You're in</h1>
+						<p class="max-w-xs text-paper/50">
+							Spot your name on the big screen. The game starts when the host says
+							go.
+						</p>
+						<p class="font-mono text-sm tabular-nums text-paper/40">
+							{{ participants.length }} in the lobby
+						</p>
+					</template>
 
-			<template v-else-if="phase === 'get_ready'">
-				<p class="font-mono text-[11px] uppercase tracking-[0.28em] text-paper/40">
-					Question {{ (qIndex ?? 0) + 1 }} of {{ total }}
-				</p>
-				<h1 class="max-w-md font-display text-2xl font-bold leading-snug text-paper">
-					{{ questionText }}
-				</h1>
-				<DrainRing
-					:percent="timerPercent"
-					:seconds="Math.ceil(remaining)"
-					:size="132"
-					color="rgb(var(--accent))"
-				/>
-				<p class="text-paper/50">Read fast. The answers drop in a second.</p>
-			</template>
+					<template v-else-if="phase === 'get_ready'">
+						<p class="font-mono text-[11px] uppercase tracking-[0.28em] text-paper/40">
+							Question {{ (qIndex ?? 0) + 1 }} of {{ total }}
+						</p>
+						<h1
+							class="max-w-md font-display text-2xl font-bold leading-snug text-paper"
+						>
+							{{ questionText }}
+						</h1>
+						<DrainRing
+							:percent="timerPercent"
+							:seconds="Math.ceil(remaining)"
+							:size="132"
+							color="rgb(var(--accent))"
+						/>
+						<p class="text-paper/50">Read fast. The answers drop in a second.</p>
+					</template>
 
-			<template v-else-if="phase === 'locked'">
-				<svg
-					v-if="selected"
-					class="h-28 w-28"
-					:class="shapeFor(selected).svgFill"
-					viewBox="0 0 24 24"
-				>
-					<path :d="shapeFor(selected).path" />
-				</svg>
-				<h1 class="font-display text-4xl font-extrabold text-paper">Locked in</h1>
-				<p class="text-paper/50">Eyes on the big screen.</p>
-			</template>
+					<template v-else-if="phase === 'locked'">
+						<svg
+							v-if="selected"
+							class="pop-in h-28 w-28"
+							:class="shapeFor(selected).svgFill"
+							viewBox="0 0 24 24"
+						>
+							<path :d="shapeFor(selected).path" />
+						</svg>
+						<h1 class="font-display text-4xl font-extrabold text-paper">Locked in</h1>
+						<p class="text-paper/50">Eyes on the big screen.</p>
+					</template>
 
-			<template v-else-if="phase === 'result'">
-				<div
-					class="grid h-24 w-24 place-items-center rounded-full text-5xl text-sunk"
-					:class="result.is_correct ? 'bg-lagoon' : 'bg-ember'"
-				>
-					{{ result.is_correct ? "✓" : "✕" }}
-				</div>
-				<h1 class="font-display text-4xl font-extrabold text-paper">
-					{{ result.is_correct ? "Correct" : result.answered ? "Wrong" : "No answer" }}
-				</h1>
-				<p v-if="result.points" class="font-mono text-2xl font-bold text-accent">
-					+{{ result.points }}
-				</p>
-				<p v-if="result.streak > 1" class="text-paper/60">
-					{{ result.streak }} in a row 🔥
-				</p>
-				<p class="font-mono text-xs uppercase tracking-[0.2em] text-paper/40">
-					Rank {{ result.rank }} · {{ result.score }} pts
-				</p>
-				<img
-					v-if="explanation?.image_url"
-					:src="explanation.image_url"
-					alt=""
-					class="max-h-[22vh] w-full object-contain"
-				/>
-				<p
-					v-if="explanation?.explanation"
-					class="max-w-sm text-sm leading-relaxed text-paper/60"
-				>
-					{{ explanation.explanation }}
-				</p>
-				<ul class="mt-2 w-full max-w-xs text-left">
-					<li
-						v-for="(entry, index) in result.top_5"
-						:key="entry.nickname"
-						class="flex items-center justify-between border-b border-haze py-2 text-sm"
-						:class="
-							entry.nickname === player.nickname
-								? 'font-bold text-accent'
-								: 'text-paper/60'
-						"
-					>
-						<span class="flex items-center gap-2">
-							<span class="w-4 font-mono text-xs tabular-nums opacity-60">{{
-								index + 1
-							}}</span>
-							<AvatarPic :id="entry.avatar" :nickname="entry.nickname" :size="22" />
-							{{ entry.nickname }}
-						</span>
-						<span class="font-mono tabular-nums">{{ entry.score }}</span>
-					</li>
-				</ul>
-			</template>
+					<template v-else-if="phase === 'result'">
+						<div
+							class="pop-in grid h-24 w-24 place-items-center rounded-full text-5xl text-sunk"
+							:class="result.is_correct ? 'bg-lagoon' : 'bg-ember'"
+						>
+							{{ result.is_correct ? "✓" : "✕" }}
+						</div>
+						<h1 class="font-display text-4xl font-extrabold text-paper">
+							{{
+								result.is_correct
+									? "Correct"
+									: result.answered
+									? "Wrong"
+									: "No answer"
+							}}
+						</h1>
+						<p
+							v-if="result.points"
+							class="pop-in font-mono text-2xl font-bold text-accent [animation-delay:60ms]"
+						>
+							+{{ result.points }}
+						</p>
+						<p v-if="result.streak > 1" class="text-paper/60">
+							{{ result.streak }} in a row 🔥
+						</p>
+						<p class="font-mono text-xs uppercase tracking-[0.2em] text-paper/40">
+							Rank {{ result.rank }} · {{ result.score }} pts
+						</p>
+						<img
+							v-if="explanation?.image_url"
+							:src="explanation.image_url"
+							alt=""
+							class="max-h-[22vh] w-full object-contain"
+						/>
+						<p
+							v-if="explanation?.explanation"
+							class="max-w-sm text-sm leading-relaxed text-paper/60"
+						>
+							{{ explanation.explanation }}
+						</p>
+						<ul class="mt-2 w-full max-w-xs text-left">
+							<li
+								v-for="(entry, index) in result.top_5"
+								:key="entry.nickname"
+								class="flex items-center justify-between border-b border-haze py-2 text-sm"
+								:class="
+									entry.nickname === player.nickname
+										? 'font-bold text-accent'
+										: 'text-paper/60'
+								"
+							>
+								<span class="flex items-center gap-2">
+									<span class="w-4 font-mono text-xs tabular-nums opacity-60">{{
+										index + 1
+									}}</span>
+									<AvatarPic
+										:id="entry.avatar"
+										:nickname="entry.nickname"
+										:size="22"
+									/>
+									{{ entry.nickname }}
+								</span>
+								<span class="font-mono tabular-nums">{{ entry.score }}</span>
+							</li>
+						</ul>
+					</template>
 
-			<template v-else-if="phase === 'podium'">
-				<h1 class="font-display text-5xl font-extrabold text-paper">
-					{{ myRank === 1 ? "You won" : `You finished #${myRank}` }}
-				</h1>
-				<p class="font-mono text-2xl font-bold text-accent">{{ score }} pts</p>
-				<ul class="mt-2 w-full max-w-xs text-left">
-					<li
-						v-for="entry in leaderboard.slice(0, 5)"
-						:key="entry.nickname"
-						class="flex items-center justify-between border-b border-haze py-2"
-						:class="
-							entry.nickname === player.nickname
-								? 'font-bold text-accent'
-								: 'text-paper/60'
-						"
-					>
-						<span class="flex items-center gap-2">
-							<span class="w-4 font-mono text-xs tabular-nums opacity-60">{{
-								entry.rank
-							}}</span>
-							<AvatarPic :id="entry.avatar" :nickname="entry.nickname" :size="22" />
-							{{ entry.nickname }}
-						</span>
-						<span class="font-mono tabular-nums">{{ entry.score }}</span>
-					</li>
-				</ul>
-				<button
-					class="mt-3 rounded-full border border-haze px-5 py-2 text-sm text-paper/60 transition hover:border-ember hover:text-alert"
-					@click="playAgain"
-				>
-					Back to join
-				</button>
-			</template>
+					<template v-else-if="phase === 'podium'">
+						<h1 class="font-display text-5xl font-extrabold text-paper">
+							{{ myRank === 1 ? "You won" : `You finished #${myRank}` }}
+						</h1>
+						<p class="font-mono text-2xl font-bold text-accent">{{ score }} pts</p>
+						<ul class="mt-2 w-full max-w-xs text-left">
+							<li
+								v-for="entry in leaderboard.slice(0, 5)"
+								:key="entry.nickname"
+								class="flex items-center justify-between border-b border-haze py-2"
+								:class="
+									entry.nickname === player.nickname
+										? 'font-bold text-accent'
+										: 'text-paper/60'
+								"
+							>
+								<span class="flex items-center gap-2">
+									<span class="w-4 font-mono text-xs tabular-nums opacity-60">{{
+										entry.rank
+									}}</span>
+									<AvatarPic
+										:id="entry.avatar"
+										:nickname="entry.nickname"
+										:size="22"
+									/>
+									{{ entry.nickname }}
+								</span>
+								<span class="font-mono tabular-nums">{{ entry.score }}</span>
+							</li>
+						</ul>
+						<button
+							class="mt-3 rounded-full border border-haze px-5 py-2 text-sm text-paper/60 transition hover:border-ember hover:text-alert"
+							@click="playAgain"
+						>
+							Back to join
+						</button>
+					</template>
 
-			<template v-else>
-				<p class="font-mono text-sm uppercase tracking-[0.22em] text-paper/40">
-					Hang tight
-				</p>
-			</template>
+					<template v-else>
+						<p class="font-mono text-sm uppercase tracking-[0.22em] text-paper/40">
+							Hang tight
+						</p>
+					</template>
+				</div>
+			</Transition>
 		</main>
 	</div>
 </template>
diff --git a/frontend/src/pages/ResetPassword.vue b/frontend/src/pages/ResetPassword.vue
index 08bc66d..8770d9b 100644
--- a/frontend/src/pages/ResetPassword.vue
+++ b/frontend/src/pages/ResetPassword.vue
@@ -55,7 +55,7 @@
 				</div>
 				<button
 					type="submit"
-					class="mt-1 rounded-2xl bg-brand py-4 font-display text-xl font-extrabold text-sunk transition hover:brightness-110 disabled:opacity-50"
+					class="mt-1 rounded-2xl bg-brand py-4 font-display text-xl font-extrabold text-sunk transition hover:brightness-110 active:scale-[0.97] disabled:opacity-50 disabled:active:scale-100"
 					:disabled="busy"
 				>
 					{{ busy ? "One moment…" : "Set password and log in" }}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 5b0c239..e3a73f9 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,8 @@
 import frappeUIPreset from "frappe-ui/tailwind";
 
 export default {
+	// touch screens keep :hover after a tap, which leaves the last-tapped answer lit
+	future: { hoverOnlyWhenSupported: true },
 	presets: [frappeUIPreset],
 	content: [
 		"./index.html",

From 04de637a0e0e1786df2ece2743d40e4dab1d4bd2 Mon Sep 17 00:00:00 2001
From: gajjug004 <gajjug004@gmail.com>
Date: Tue, 6 Oct 2026 18:11:01 +0530
Subject: [PATCH 2/2] docs: log motion polish progress

---
 progress.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/progress.md b/progress.md
index 87fc19c..632f910 100644
--- a/progress.md
+++ b/progress.md
@@ -1,5 +1,20 @@
 # Progress
 
+## Motion polish (2026-10-06)
+
+### Done
+
+- Player phone: phase changes fade and rise in (220ms, strong ease-out) and fade out faster (120ms). The locked-in shape, result badge and points pop in from `scale(0.9)`.
+- Host: lobby chips scale in on join and fade on kick. Distribution bars grow from the bottom with `scaleY`. Podium bars reveal with `clip-path` instead of `height`, third first and winner last.
+- Press feedback: `.ctl` and the brand CTAs scale to 0.97 on `:active`.
+- Touch: `hoverOnlyWhenSupported` stops a tapped answer staying lit. Hover-only actions (kick, rail, image) stay visible under `(hover: none)`.
+- Cleanup: named transition properties instead of bare `transition: 0.15s ease`, dropped the dead gradient transition on the drain ring.
+
+### Notes
+
+- Headless Chrome reports `(hover: none)`, so hover-only buttons show in agent-browser screenshots.
+- agent-browser `set device "iPhone 14"` (DPR 3) misplaces clicks: one answer landed on the wrong tile and Join missed. Use `set viewport 390 844` for player tests.
+
 ## Branded emails (2026-10-06)
 
 ### Done