From a24cda989acd44705fd61166ffdae70a7db62ccf Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Thu, 20 Aug 2026 12:38:46 +0200
Subject: [PATCH] ENH - apply liquid glass across app controls

---
 frontend/src/ui/controls.css                  |  2 +
 frontend/src/ui/controls/SkyButton.test.ts    |  3 +
 .../apps/AppStoreDetail.contract.test.ts      | 18 +++-
 frontend/src/views/apps/AppStoreDetail.vue    | 64 +++++++------
 .../views/apps/CalculatorApp.contract.test.ts |  5 +-
 frontend/src/views/apps/CalculatorApp.vue     | 12 +--
 .../src/views/apps/CameraApp.contract.test.ts |  8 ++
 frontend/src/views/apps/CameraApp.vue         | 93 +++++++++----------
 .../views/apps/FeatherApp.contract.test.ts    | 14 ++-
 frontend/src/views/apps/FeatherApp.vue        | 35 ++-----
 frontend/src/views/apps/FlareApp.vue          | 16 ++--
 frontend/src/views/apps/FlipTokApp.vue        | 19 ++--
 .../src/views/apps/MailApp.contract.test.ts   |  7 +-
 frontend/src/views/apps/MailApp.vue           | 10 +-
 .../src/views/apps/MapApp.contract.test.ts    | 11 +++
 frontend/src/views/apps/MapApp.vue            | 16 ++--
 frontend/src/views/apps/MemoryApp.vue         | 20 ++--
 .../views/apps/MessagesApp.contract.test.ts   |  2 +-
 frontend/src/views/apps/MessagesApp.vue       |  2 +-
 frontend/src/views/apps/MinesweeperApp.vue    | 20 ++--
 frontend/src/views/apps/NeonDropApp.vue       | 34 ++++---
 frontend/src/views/apps/NumberMergeApp.vue    | 20 ++--
 frontend/src/views/apps/PicstagramApp.vue     | 60 +++++++-----
 frontend/src/views/apps/SkyFlappyApp.vue      | 13 +--
 .../src/views/apps/SkyUiApps.contract.test.ts | 27 ++++++
 frontend/src/views/apps/SnakeApp.vue          | 16 ++--
 frontend/src/views/apps/TowerStackApp.vue     | 24 +++--
 frontend/src/views/apps/WeazelNewsApp.vue     |  5 +-
 28 files changed, 343 insertions(+), 233 deletions(-)

diff --git a/frontend/src/ui/controls.css b/frontend/src/ui/controls.css
index 53954fd..f0743fd 100644
--- a/frontend/src/ui/controls.css
+++ b/frontend/src/ui/controls.css
@@ -2854,6 +2854,8 @@ label.sky-list-item__row {
 .sky-glass--interactive {
   min-width: var(--sky-touch-target, 44px);
   min-height: var(--sky-touch-target, 44px);
+  -webkit-backdrop-filter: blur(18px) saturate(145%);
+  backdrop-filter: blur(18px) saturate(145%);
   cursor: pointer;
 }
 
diff --git a/frontend/src/ui/controls/SkyButton.test.ts b/frontend/src/ui/controls/SkyButton.test.ts
index 36e0275..70dc586 100644
--- a/frontend/src/ui/controls/SkyButton.test.ts
+++ b/frontend/src/ui/controls/SkyButton.test.ts
@@ -47,6 +47,9 @@ describe('SkyButton', () => {
     expect(controls).toMatch(
       /\.sky-glass\.sky-button--glass\s*\{[^}]*background:\s*var\(--sky-glass[^}]*box-shadow:\s*var\(--sky-shadow-glass\)/s,
     )
+    expect(controls).toMatch(
+      /\.sky-glass--interactive\s*\{[^}]*-webkit-backdrop-filter:\s*blur\(18px\) saturate\(145%\);[^}]*backdrop-filter:\s*blur\(18px\) saturate\(145%\);/s,
+    )
   })
 
   it('keeps focus and pressed feedback on the contextual accent', () => {
diff --git a/frontend/src/views/apps/AppStoreDetail.contract.test.ts b/frontend/src/views/apps/AppStoreDetail.contract.test.ts
index 24b67eb..e40b65c 100644
--- a/frontend/src/views/apps/AppStoreDetail.contract.test.ts
+++ b/frontend/src/views/apps/AppStoreDetail.contract.test.ts
@@ -48,13 +48,11 @@ describe('AppStoreDetail contract', () => {
     expect(previewSource).toContain('v-if="previewImage && screen < 3"')
     expect(previewSource).toContain(':src="previewImage"')
     expect(previewSource).toContain('store-detail-preview__screenshot')
-    expect(previewSource).not.toContain("visual.scene ===")
+    expect(previewSource).not.toContain('visual.scene ===')
     expect(source).toContain('getAppStorePreviewVisual')
     expect(source).toContain('Apps.appStore.previews.${props.app.id}')
     expect(previewSource).toContain(':src="iconImage"')
-    expect(source).toMatch(
-      /previewScreens\s*=\s*\[0, 1, 2, 3, 4\] as const/,
-    )
+    expect(source).toMatch(/previewScreens\s*=\s*\[0, 1, 2, 3, 4\] as const/)
     expect(previewSource).toContain('screen === 3')
     expect(previewSource).toContain('screen === 4')
     expect(previewSource).toContain('store-detail-preview__details')
@@ -71,6 +69,16 @@ describe('AppStoreDetail contract', () => {
     expect(source).toContain('scrollToPreview(activePreviewIndex + 1)')
     expect(source).toContain('details.previousPreview')
     expect(source).toContain('details.nextPreview')
-    expect(source).toContain('.store-detail__toolbar button:hover')
+    expect(source).toContain('.store-detail__toolbar-button:hover')
+  })
+
+  it('uses shared liquid glass for toolbar and preview controls', () => {
+    expect(source).toContain("import { SkyButton } from '@/ui'")
+    expect(source.match(/<SkyButton\s+glass/g)).toHaveLength(4)
+    expect(source).toContain('class="store-detail__toolbar-button"')
+    expect(source).toContain('class="store-detail__preview-control"')
+    expect(source).toMatch(
+      /\.store-detail__preview-control\s*\{[^}]*width:\s*var\(--sky-touch-target\);[^}]*height:\s*var\(--sky-touch-target\);[^}]*border-radius:\s*50%;/s,
+    )
   })
 })
diff --git a/frontend/src/views/apps/AppStoreDetail.vue b/frontend/src/views/apps/AppStoreDetail.vue
index 3f846c9..c94635e 100644
--- a/frontend/src/views/apps/AppStoreDetail.vue
+++ b/frontend/src/views/apps/AppStoreDetail.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
-import {
-  ChevronLeft,
-  ChevronRight,
-  Share2,
-  Star,
-} from 'lucide-vue-next'
+import { ChevronLeft, ChevronRight, Share2, Star } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 
 import { getPhoneAppLabel, isExternalPhoneApp } from '@/config/apps'
 import { usePhoneStore } from '@/stores/phone'
 import type { LaunchablePhoneAppDefinition } from '@/types/apps'
+import { SkyButton } from '@/ui'
 import { getAppStorePreviewImage } from '@/utils/appStorePreviewImages'
 import { getAppStorePreviewVisual } from '@/utils/appStorePreviews'
 
@@ -126,20 +122,28 @@ function updateActivePreview(): void {
 <template>
   <section class="store-detail" :style="detailStyle">
     <header class="store-detail__toolbar">
-      <button
+      <SkyButton
+        glass
+        icon-only
+        rounded
+        class="store-detail__toolbar-button"
         type="button"
         :aria-label="phone.t('Common.back')"
         @click="emit('back')"
       >
         <ChevronLeft :size="26" :stroke-width="2.2" aria-hidden="true" />
-      </button>
-      <button
+      </SkyButton>
+      <SkyButton
+        glass
+        icon-only
+        rounded
+        class="store-detail__toolbar-button"
         type="button"
         :aria-label="phone.t('Apps.appStore.details.share')"
         @click="emit('share')"
       >
         <Share2 :size="21" :stroke-width="2" aria-hidden="true" />
-      </button>
+      </SkyButton>
     </header>
 
     <section class="store-detail__hero">
@@ -212,22 +216,30 @@ function updateActivePreview(): void {
         <h2>{{ phone.t('Apps.appStore.details.preview') }}</h2>
         <div class="store-detail__preview-navigation">
           <span>{{ activePreviewIndex + 1 }} / {{ previewCount }}</span>
-          <button
+          <SkyButton
+            glass
+            icon-only
+            rounded
+            class="store-detail__preview-control"
             type="button"
             :aria-label="phone.t('Apps.appStore.details.previousPreview')"
             :disabled="activePreviewIndex === 0"
             @click="scrollToPreview(activePreviewIndex - 1)"
           >
             <ChevronLeft :size="17" :stroke-width="2.4" aria-hidden="true" />
-          </button>
-          <button
+          </SkyButton>
+          <SkyButton
+            glass
+            icon-only
+            rounded
+            class="store-detail__preview-control"
             type="button"
             :aria-label="phone.t('Apps.appStore.details.nextPreview')"
             :disabled="activePreviewIndex === previewCount - 1"
             @click="scrollToPreview(activePreviewIndex + 1)"
           >
             <ChevronRight :size="17" :stroke-width="2.4" aria-hidden="true" />
-          </button>
+          </SkyButton>
         </div>
       </header>
       <div
@@ -286,7 +298,7 @@ function updateActivePreview(): void {
   justify-content: space-between;
 }
 
-.store-detail__toolbar button {
+.store-detail__toolbar-button {
   width: var(--sky-touch-target);
   height: var(--sky-touch-target);
   display: grid;
@@ -294,7 +306,6 @@ function updateActivePreview(): void {
   border: 1px solid var(--sky-hairline);
   border-radius: 50%;
   color: var(--sky-text);
-  background: var(--sky-surface-variant);
   transition:
     background-color 100ms ease,
     border-color 100ms ease,
@@ -302,7 +313,7 @@ function updateActivePreview(): void {
     transform 100ms ease;
 }
 
-.store-detail__toolbar button:active {
+.store-detail__toolbar-button:active {
   transform: scale(0.94);
 }
 
@@ -481,27 +492,28 @@ function updateActivePreview(): void {
   text-align: center;
 }
 
-.store-detail__preview-navigation button {
-  width: 30px;
-  height: 30px;
+.store-detail__preview-control {
+  width: var(--sky-touch-target);
+  height: var(--sky-touch-target);
+  min-width: var(--sky-touch-target);
+  min-height: var(--sky-touch-target);
   display: grid;
   place-items: center;
   border: 1px solid var(--sky-hairline);
   border-radius: 50%;
   padding: 0;
   color: var(--sky-text);
-  background: var(--sky-surface-variant);
   transition:
     background-color 100ms ease,
     color 100ms ease,
     transform 100ms ease;
 }
 
-.store-detail__preview-navigation button:disabled {
+.store-detail__preview-control:disabled {
   opacity: 0.34;
 }
 
-.store-detail__preview-navigation button:active:not(:disabled) {
+.store-detail__preview-control:active:not(:disabled) {
   transform: scale(0.92);
 }
 
@@ -520,16 +532,14 @@ function updateActivePreview(): void {
 }
 
 @media (hover: hover) {
-  .store-detail__toolbar button:hover {
+  .store-detail__toolbar-button:hover {
     border-color: rgba(255, 255, 255, 0.16);
-    background: var(--sky-surface-tint);
     box-shadow: 0 7px 16px rgba(0, 0, 0, 0.18);
     transform: translateY(-1px);
   }
 
-  .store-detail__preview-navigation button:hover:not(:disabled) {
+  .store-detail__preview-control:hover:not(:disabled) {
     color: var(--sky-app-accent);
-    background: var(--sky-surface-tint);
     transform: translateY(-1px);
   }
 }
diff --git a/frontend/src/views/apps/CalculatorApp.contract.test.ts b/frontend/src/views/apps/CalculatorApp.contract.test.ts
index 7444d2f..62c6696 100644
--- a/frontend/src/views/apps/CalculatorApp.contract.test.ts
+++ b/frontend/src/views/apps/CalculatorApp.contract.test.ts
@@ -52,7 +52,8 @@ describe('CalculatorApp layout contract', () => {
     )
     expect(source).toContain('calculator-history__nav-button--edit')
     expect(source).toContain('calculator-history__nav-button--close')
-    expect(source).toContain('background: rgb(255 255 255 / 9%);')
+    expect(source.match(/<SkyButton\s+glass/g)).toHaveLength(2)
+    expect(source).toContain('--sky-glass: rgb(44 44 46 / 62%);')
     expect(source).toContain('-webkit-backdrop-filter: none;')
     expect(source).toContain('backdrop-filter: none;')
     expect(source).toContain('min-width: 106px;')
@@ -62,7 +63,7 @@ describe('CalculatorApp layout contract', () => {
     expect(source).toContain('place-items: center;')
     expect(source).toContain('padding: 0;')
     expect(source).toMatch(
-      /\.calculator-history__nav-button:hover:not\(:disabled\)[^}]*background: rgb\(255 255 255 \/ 15%\);[^}]*transform: none;[^}]*filter: none;/s,
+      /\.calculator-history__nav-button:hover:not\(:disabled\)[^}]*transform: none;[^}]*filter: brightness\(1\.08\);/s,
     )
     expect(source).not.toContain('class="calculator-history__edit"')
     expect(source).not.toContain('class="calculator-history__close"')
diff --git a/frontend/src/views/apps/CalculatorApp.vue b/frontend/src/views/apps/CalculatorApp.vue
index 5dabf8b..ec2960f 100644
--- a/frontend/src/views/apps/CalculatorApp.vue
+++ b/frontend/src/views/apps/CalculatorApp.vue
@@ -378,6 +378,7 @@ watch([() => calculator.display, expression], async () => {
         >
           <template #left>
             <SkyButton
+              glass
               class="calculator-history__nav-button calculator-history__nav-button--edit"
               inline
               rounded
@@ -397,6 +398,7 @@ watch([() => calculator.display, expression], async () => {
           </template>
           <template #right>
             <SkyButton
+              glass
               class="calculator-history__nav-button calculator-history__nav-button--close"
               icon-only
               rounded
@@ -721,16 +723,15 @@ watch([() => calculator.display, expression], async () => {
 }
 
 .calculator-history__navbar :deep(.calculator-history__nav-button) {
+  --sky-glass: rgb(44 44 46 / 62%);
+  --sky-hairline: rgb(255 255 255 / 14%);
   height: 44px;
   min-height: 44px;
-  background: rgb(255 255 255 / 9%);
   color: #fff;
-  box-shadow: none;
 }
 
 .calculator-history__navbar :deep(.calculator-history__nav-button:active) {
-  background: rgb(255 255 255 / 14%);
-  filter: none;
+  filter: brightness(0.94);
 }
 
 .calculator-history__navbar :deep(.calculator-history__nav-button--edit) {
@@ -757,9 +758,8 @@ watch([() => calculator.display, expression], async () => {
 @media (hover: hover) {
   .calculator-history__navbar
     :deep(.calculator-history__nav-button:hover:not(:disabled)) {
-    background: rgb(255 255 255 / 15%);
     transform: none;
-    filter: none;
+    filter: brightness(1.08);
   }
 }
 
diff --git a/frontend/src/views/apps/CameraApp.contract.test.ts b/frontend/src/views/apps/CameraApp.contract.test.ts
index c0bee65..6dc41e2 100644
--- a/frontend/src/views/apps/CameraApp.contract.test.ts
+++ b/frontend/src/views/apps/CameraApp.contract.test.ts
@@ -31,6 +31,14 @@ const cameraAnimations = readFileSync(
 )
 
 describe('Camera app controls', () => {
+  it('uses shared liquid glass for camera interaction buttons', () => {
+    expect(cameraView.match(/variant="glass"/g)).toHaveLength(5)
+    expect(cameraView).toMatch(
+      /<sky-glass\s+component="button"\s+class="camera-latest"/,
+    )
+    expect(cameraView).not.toContain('variant="neutral"')
+  })
+
   it('uses the Sky UI moving segment for photo and video modes', () => {
     expect(cameraView).toContain('SkySegmented')
     expect(cameraView).toContain(':active-index="mode === \'photo\' ? 0 : 1"')
diff --git a/frontend/src/views/apps/CameraApp.vue b/frontend/src/views/apps/CameraApp.vue
index 3be9103..1b10071 100644
--- a/frontend/src/views/apps/CameraApp.vue
+++ b/frontend/src/views/apps/CameraApp.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SkyFab, SkyAppPage } from '@/ui'
+import { SkyAppPage, SkyButton, SkyFab, SkyGlass } from '@/ui'
 import {
   ArrowLeft,
   Images,
@@ -421,13 +421,11 @@ onMounted(() => {
   window.addEventListener('keyup', onKeyup)
   window.addEventListener('message', onMessage)
   void nuiCall('camera:setActive', { active: true })
-  void nuiCall<MediaConfig>('media:config').then(
-    (response) => {
-      if (response.success && response.data?.videoBitrateKbps) {
-        videoBitrateKbps.value = response.data.videoBitrateKbps
-      }
-    },
-  )
+  void nuiCall<MediaConfig>('media:config').then((response) => {
+    if (response.success && response.data?.videoBitrateKbps) {
+      videoBitrateKbps.value = response.data.videoBitrateKbps
+    }
+  })
   void loadLatest()
   startGameView()
 })
@@ -486,22 +484,24 @@ onBeforeUnmount(() => {
 
     <header class="camera-topbar">
       <div class="camera-topbar-actions">
-        <button
+        <sky-fab
           v-if="requestedMessageMedia"
-          class="camera-picker-back"
+          component="button"
+          class="camera-control camera-picker-back"
           type="button"
+          variant="glass"
           :aria-label="phone.t('Common.back')"
           @click="cancelMediaSelection"
         >
-          <ArrowLeft :size="20" />
-        </button>
+          <template #icon><ArrowLeft :size="20" /></template>
+        </sky-fab>
         <sky-fab
           v-else
           component="button"
           type="button"
           class="camera-control"
           :class="{ 'camera-control--flash-active': flashEnabled }"
-          variant="neutral"
+          variant="glass"
           :aria-label="phone.t('Apps.camera.flash')"
           @click="toggleFlash"
         >
@@ -516,7 +516,7 @@ onBeforeUnmount(() => {
           type="button"
           class="camera-control"
           :class="{ 'camera-control--danger': !microphoneEnabled }"
-          variant="neutral"
+          variant="glass"
           :disabled="recording || savingVideo"
           :aria-label="
             phone.t(
@@ -543,8 +543,10 @@ onBeforeUnmount(() => {
       <span v-else-if="pendingCount" class="camera-upload-pill">
         {{ phone.t('Apps.camera.uploading', { count: String(pendingCount) }) }}
       </span>
-      <button
+      <SkyButton
         v-else
+        glass
+        rounded
         class="camera-focus-pill camera-lock-control"
         :class="{ 'camera-lock-control--active': cameraLocked }"
         type="button"
@@ -561,12 +563,12 @@ onBeforeUnmount(() => {
         <LockKeyhole v-if="cameraLocked" :size="12" />
         <LockOpen v-else :size="12" />
         <kbd>{{ phone.t('Apps.camera.spaceKey') }}</kbd>
-      </button>
+      </SkyButton>
       <sky-fab
         component="button"
         type="button"
         class="camera-control"
-        variant="neutral"
+        variant="glass"
         :disabled="recording || savingVideo"
         :aria-label="
           phone.t(
@@ -588,9 +590,11 @@ onBeforeUnmount(() => {
 
     <div class="camera-zoom-control">
       <div class="camera-zoom-row">
-        <button
+        <SkyButton
           v-for="zoom in zoomLevels"
           :key="zoom"
+          glass
+          rounded
           class="camera-zoom-pill"
           :class="{ active: Math.abs(selectedZoom - zoom) < 0.03 }"
           type="button"
@@ -599,13 +603,14 @@ onBeforeUnmount(() => {
           @click="setZoom(zoom)"
         >
           {{ zoom }}x
-        </button>
+        </SkyButton>
       </div>
     </div>
 
     <footer class="camera-controls">
       <div class="camera-capture-row">
-        <button
+        <sky-glass
+          component="button"
           class="camera-latest"
           type="button"
           :aria-label="phone.t('Apps.camera.openGallery')"
@@ -625,7 +630,7 @@ onBeforeUnmount(() => {
           />
           <Video v-else-if="latestMedia" :size="22" />
           <Images v-else :size="22" />
-        </button>
+        </sky-glass>
 
         <button
           class="camera-shutter"
@@ -650,7 +655,7 @@ onBeforeUnmount(() => {
           component="button"
           type="button"
           class="camera-control camera-selfie"
-          variant="neutral"
+          variant="glass"
           :aria-label="phone.t('Apps.camera.flip')"
           @click="toggleFacing"
         >
@@ -799,8 +804,9 @@ onBeforeUnmount(() => {
   height: 44px;
 }
 .camera-control {
-  --sky-glass-solid: rgb(28 28 30 / 80%);
-  color: rgb(255 255 255 / 86%);
+  --sky-glass: rgb(28 28 30 / 58%);
+  --sky-hairline: rgb(255 255 255 / 16%);
+  color: rgb(255 255 255 / 92%) !important;
 }
 .camera-control--flash-active {
   color: #ffd60a !important;
@@ -811,13 +817,6 @@ onBeforeUnmount(() => {
 .camera-picker-back {
   width: 44px;
   height: 44px;
-  border: 0;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  background: #1c1c1ecc;
-  color: #fff;
-  backdrop-filter: blur(16px);
 }
 .camera-control svg {
   width: 21px;
@@ -831,7 +830,7 @@ onBeforeUnmount(() => {
 .camera-page--landscape .camera-latest svg {
   transform: rotate(90deg);
 }
-.camera-focus-pill,
+.camera-focus-pill:not(.sky-button--glass),
 .camera-upload-pill {
   min-width: 0;
   padding: 7px 10px;
@@ -853,7 +852,7 @@ onBeforeUnmount(() => {
 }
 .camera-lock-control {
   min-height: 44px;
-  border: 0;
+  padding: 7px 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -902,27 +901,20 @@ onBeforeUnmount(() => {
   z-index: 4;
   bottom: 196px;
   left: 50%;
-  width: 140px;
-  padding: 4px 6px;
-  border-radius: 999px;
-  background: rgb(18 18 20 / 72%);
-  box-shadow: 0 8px 24px rgb(0 0 0 / 24%);
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
+  width: auto;
   transform: translateX(-50%);
 }
 .camera-zoom-row {
   display: flex;
   justify-content: space-between;
-  gap: 6px;
+  gap: 8px;
 }
 .camera-zoom-pill {
-  width: 30px;
-  height: 26px;
+  width: 44px;
+  min-width: 44px;
+  height: 44px;
+  min-height: 44px;
   padding: 0;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  background: transparent;
   color: #fff;
   font-size: 10px;
   text-align: center;
@@ -933,9 +925,6 @@ onBeforeUnmount(() => {
     box-shadow 0.2s ease;
 }
 .camera-zoom-pill.active {
-  border-color: transparent;
-  background: rgb(44 44 46 / 88%);
-  box-shadow: 0 8px 16px rgb(0 0 0 / 30%);
   color: #ffd60a;
 }
 .camera-controls {
@@ -956,15 +945,17 @@ onBeforeUnmount(() => {
   padding: 0 24px 32px;
 }
 .camera-latest {
+  --sky-glass: rgb(28 28 30 / 58%);
+  --sky-hairline: rgb(255 255 255 / 16%);
   width: 44px;
   height: 44px;
   overflow: hidden;
-  border: 0;
   border-radius: 50%;
-  background: #111b;
+  background: var(--sky-glass);
   color: #fff;
   display: grid;
   place-items: center;
+  box-shadow: var(--sky-shadow-glass);
 }
 .camera-selfie {
   justify-self: end;
diff --git a/frontend/src/views/apps/FeatherApp.contract.test.ts b/frontend/src/views/apps/FeatherApp.contract.test.ts
index 22aec0e..6b28d83 100644
--- a/frontend/src/views/apps/FeatherApp.contract.test.ts
+++ b/frontend/src/views/apps/FeatherApp.contract.test.ts
@@ -26,6 +26,12 @@ describe('FeatherApp Sky UI contract', () => {
     expect(source).toContain('with-tabbar')
   })
 
+  it('uses shared liquid glass for the floating compose action', () => {
+    expect(source).toMatch(
+      /<SkyFab[\s\S]*?class="feather-compose-fab"[\s\S]*?variant="glass"/,
+    )
+  })
+
   it('gives likes and bookmarks a reduced-motion-safe pulse animation', () => {
     expect(postCard).toContain(
       "const reactionPulse = ref<'like' | 'bookmark' | null>(null)",
@@ -143,7 +149,9 @@ describe('FeatherApp Sky UI contract', () => {
   })
 
   it('keeps profile suggestion content styles off the follow button', () => {
-    expect(source).toContain('class="feather-profile-suggestion__profile"')
+    expect(source).toContain(
+      'class="feather-profile-suggestion__profile"',
+    )
     expect(source).toMatch(
       /\.feather-app\.feather-app--active \.feather-profile-suggestion__profile\s*\{[^}]*width:\s*100%/s,
     )
@@ -193,9 +201,7 @@ describe('FeatherApp Sky UI contract', () => {
     expect(source).toContain('<SkyScrollRail')
     expect(source).toContain('class="feather-profile-suggestions__rail"')
     expect(source).toContain(':label="t(\'people\')"')
-    expect(source).toContain(
-      'class="feather-profile-suggestion__profile"',
-    )
+    expect(source).toContain('class="feather-profile-suggestion__profile"')
     expect(source).toMatch(
       /\.feather-app\.feather-app--active \.feather-profile-suggestion__profile\s*\{[^}]*width:\s*100%/s,
     )
diff --git a/frontend/src/views/apps/FeatherApp.vue b/frontend/src/views/apps/FeatherApp.vue
index 2dd7ec7..7532e50 100644
--- a/frontend/src/views/apps/FeatherApp.vue
+++ b/frontend/src/views/apps/FeatherApp.vue
@@ -2174,6 +2174,7 @@ onMounted(async () => {
         component="button"
         type="button"
         class="feather-compose-fab"
+        variant="glass"
         :aria-label="t('newPost')"
         @click="openComposer()"
       >
@@ -2331,7 +2332,8 @@ onMounted(async () => {
       />
       <template v-if="mediaPreview.items.length > 1">
         <SkyButton
-          clear
+          glass
+          icon-only
           rounded
           class="feather-media-preview__arrow feather-media-preview__arrow--left"
           :aria-label="t('previousImage')"
@@ -2340,7 +2342,8 @@ onMounted(async () => {
           <ChevronLeft :size="20" :stroke-width="2.8" />
         </SkyButton>
         <SkyButton
-          clear
+          glass
+          icon-only
           rounded
           class="feather-media-preview__arrow feather-media-preview__arrow--right"
           :aria-label="t('nextImage')"
@@ -2389,22 +2392,15 @@ onMounted(async () => {
   cursor: default;
 }
 .feather-media-preview__arrow {
-  --sky-app-accent: rgb(10 14 20 / 88%);
   --sky-button-text: #fff;
   position: absolute;
   top: 50%;
-  width: 34px !important;
-  min-width: 34px;
-  height: 34px;
-  min-height: 34px;
-  border: 1.5px solid rgb(255 255 255 / 58%);
+  width: 44px !important;
+  min-width: 44px;
+  height: 44px;
+  min-height: 44px;
   padding: 0;
   color: #fff !important;
-  background: rgb(10 14 20 / 88%) !important;
-  box-shadow:
-    0 5px 16px rgb(0 0 0 / 58%),
-    inset 0 0 0 1px rgb(255 255 255 / 8%);
-  backdrop-filter: blur(10px);
   transform: translateY(-50%);
 }
 .feather-media-preview__arrow--left {
@@ -4486,7 +4482,6 @@ onMounted(async () => {
   place-items: center;
 }
 .feather-compose-fab {
-  --sky-app-accent: #58a6ff;
   position: absolute;
   z-index: 12;
   right: 14px;
@@ -4494,23 +4489,14 @@ onMounted(async () => {
   width: 46px;
   height: 46px;
   min-width: 46px;
-  border: 1px solid color-mix(in srgb, var(--feather-blue) 55%, #fff);
-  color: #fff;
-  box-shadow:
-    0 9px 24px rgb(29 155 240 / 38%),
-    0 3px 8px rgb(0 0 0 / 22%),
-    inset 0 1px 0 rgb(255 255 255 / 32%);
+  color: var(--feather-blue);
   transition:
     transform 150ms ease,
     box-shadow 150ms ease,
     filter 150ms ease;
 }
 .feather-compose-fab:active {
-  filter: brightness(0.94);
   transform: scale(0.94);
-  box-shadow:
-    0 4px 12px rgb(29 155 240 / 28%),
-    inset 0 1px 0 rgb(255 255 255 / 22%);
 }
 .feather-navigation__badge-anchor b {
   position: absolute;
@@ -5415,7 +5401,6 @@ onMounted(async () => {
   .feather-edit__photo-actions :deep(.sky-button) {
     border-color: var(--feather-blue);
   }
-  .feather-compose-fab,
   .feather-edit__avatar {
     border-color: #70c5fa;
   }
diff --git a/frontend/src/views/apps/FlareApp.vue b/frontend/src/views/apps/FlareApp.vue
index 0fc5998..4835ee9 100644
--- a/frontend/src/views/apps/FlareApp.vue
+++ b/frontend/src/views/apps/FlareApp.vue
@@ -2037,14 +2037,17 @@ onBeforeUnmount(() => {
       role="dialog"
       aria-modal="true"
     >
-      <button
+      <SkyButton
+        glass
+        icon-only
+        rounded
         type="button"
         class="flare-match-reveal__close"
         :aria-label="phone.t('Common.close')"
         @click="matchReveal = null"
       >
         <X />
-      </button>
+      </SkyButton>
       <Flame class="flare-match-reveal__flame" fill="currentColor" />
       <h2>{{ phone.t('Apps.flare.itsAMatch') }}</h2>
       <p>
@@ -3419,14 +3422,13 @@ onBeforeUnmount(() => {
   position: absolute;
   top: 24px;
   right: 18px;
-  width: 42px;
-  height: 42px;
+  width: 44px;
+  min-width: 44px;
+  height: 44px;
+  min-height: 44px;
   display: grid;
   place-items: center;
-  border: 0;
-  border-radius: 50%;
   color: #fff;
-  background: rgb(0 0 0 / 18%);
 }
 .flare-match-reveal__flame {
   width: 58px;
diff --git a/frontend/src/views/apps/FlipTokApp.vue b/frontend/src/views/apps/FlipTokApp.vue
index 2cf2756..e089523 100644
--- a/frontend/src/views/apps/FlipTokApp.vue
+++ b/frontend/src/views/apps/FlipTokApp.vue
@@ -2408,7 +2408,10 @@ onBeforeUnmount(() => {
               alt=""
             />
             <template v-if="selectedMediaItems.length > 1">
-              <button
+              <SkyButton
+                glass
+                icon-only
+                rounded
                 type="button"
                 class="compose-photo-preview__arrow compose-photo-preview__arrow--previous"
                 :disabled="composerPhotoIndex === 0"
@@ -2416,8 +2419,11 @@ onBeforeUnmount(() => {
                 @click="moveComposerPhoto(-1)"
               >
                 <ChevronLeft />
-              </button>
-              <button
+              </SkyButton>
+              <SkyButton
+                glass
+                icon-only
+                rounded
                 type="button"
                 class="compose-photo-preview__arrow compose-photo-preview__arrow--next"
                 :disabled="composerPhotoIndex === selectedMediaItems.length - 1"
@@ -2425,7 +2431,7 @@ onBeforeUnmount(() => {
                 @click="moveComposerPhoto(1)"
               >
                 <ChevronRight />
-              </button>
+              </SkyButton>
               <span class="compose-photo-preview__count">
                 {{ composerPhotoIndex + 1 }} / {{ selectedMediaItems.length }}
               </span>
@@ -5872,12 +5878,7 @@ onBeforeUnmount(() => {
   padding: 0;
   display: grid;
   place-items: center;
-  border: 1px solid rgb(255 255 255 / 22%);
-  border-radius: 50%;
-  background: rgb(14 14 16 / 58%);
   color: #fff;
-  box-shadow: 0 4px 14px rgb(0 0 0 / 24%);
-  backdrop-filter: blur(10px);
   pointer-events: auto;
 }
 
diff --git a/frontend/src/views/apps/MailApp.contract.test.ts b/frontend/src/views/apps/MailApp.contract.test.ts
index bc0252a..cfa332f 100644
--- a/frontend/src/views/apps/MailApp.contract.test.ts
+++ b/frontend/src/views/apps/MailApp.contract.test.ts
@@ -112,7 +112,7 @@ describe('MailApp Sky UI contract', () => {
     expect(toolbar).toContain('{{ activeFilterSummary }}')
     expect(toolbar).toContain('<sky-searchbar')
     expect(toolbar).toContain('@update:model-value="updateSearch"')
-    expect(toolbar).toContain('variant="neutral"')
+    expect(toolbar).toContain('variant="glass"')
     expect(toolbar).toContain('@click="beginCompose()"')
     expect(source).not.toContain('class="mail-search"')
     expect(source).not.toContain('class="mail-compose-fab"')
@@ -121,6 +121,11 @@ describe('MailApp Sky UI contract', () => {
     )
   })
 
+  it('uses liquid glass for mailbox, filter and compose floating actions', () => {
+    expect(source.match(/variant="glass"/g)).toHaveLength(5)
+    expect(source).not.toContain('variant="neutral"')
+  })
+
   it('offers multiple filter criteria in one scrolling Sky UI modal', () => {
     const filterStart = source.indexOf('class="mail-modal mail-filter-modal"')
     const filterEnd = source.indexOf('</sky-sheet>', filterStart)
diff --git a/frontend/src/views/apps/MailApp.vue b/frontend/src/views/apps/MailApp.vue
index 692c336..92ca09f 100644
--- a/frontend/src/views/apps/MailApp.vue
+++ b/frontend/src/views/apps/MailApp.vue
@@ -1246,7 +1246,7 @@ onBeforeUnmount(() => {
           v-if="editingMailboxes"
           component="button"
           type="button"
-          variant="neutral"
+          variant="glass"
           :text="phone.t('Apps.mail.newMailbox')"
           :aria-label="phone.t('Apps.mail.newMailbox')"
           @click="beginMailboxCreate"
@@ -1257,7 +1257,7 @@ onBeforeUnmount(() => {
           v-else
           component="button"
           type="button"
-          variant="neutral"
+          variant="glass"
           :aria-label="phone.t('Apps.mail.compose')"
           @click="beginCompose()"
         >
@@ -1426,7 +1426,7 @@ onBeforeUnmount(() => {
           component="button"
           type="button"
           class="mail-filter-fab mail-filter-fab--active"
-          variant="neutral"
+          variant="glass"
           :disabled="!canFilterFolder"
           :aria-label="filterButtonLabel"
           :aria-pressed="true"
@@ -1448,7 +1448,7 @@ onBeforeUnmount(() => {
           component="button"
           type="button"
           class="mail-filter-fab"
-          variant="neutral"
+          variant="glass"
           :disabled="!canFilterFolder"
           :aria-label="filterButtonLabel"
           :aria-pressed="false"
@@ -1467,7 +1467,7 @@ onBeforeUnmount(() => {
         <sky-fab
           component="button"
           type="button"
-          variant="neutral"
+          variant="glass"
           :aria-label="phone.t('Apps.mail.compose')"
           @click="beginCompose()"
         >
diff --git a/frontend/src/views/apps/MapApp.contract.test.ts b/frontend/src/views/apps/MapApp.contract.test.ts
index ab60792..3c15384 100644
--- a/frontend/src/views/apps/MapApp.contract.test.ts
+++ b/frontend/src/views/apps/MapApp.contract.test.ts
@@ -15,6 +15,17 @@ describe('MapApp interaction contract', () => {
     expect(source).not.toContain('<EasyShareSheet')
   })
 
+  it('uses translucent liquid glass for every floating map control', () => {
+    const controlsStart = source.indexOf('class="map-controls"')
+    const controlsEnd = source.indexOf('</nav>', controlsStart)
+    const controls = source.slice(controlsStart, controlsEnd)
+
+    expect(controls.match(/variant="glass"/g)).toHaveLength(4)
+    expect(controls).not.toContain('variant="neutral"')
+    expect(controls).not.toContain('variant="primary"')
+    expect(source).toContain('--sky-glass: rgb(247 247 248 / 72%);')
+  })
+
   it('keeps zoom and panning inside scale-aware map bounds', () => {
     expect(source).toContain('minimumCoverZoom(metrics, baseMinZoom)')
     expect(source).toContain('clampMapPan(nextPan, nextZoom, metrics)')
diff --git a/frontend/src/views/apps/MapApp.vue b/frontend/src/views/apps/MapApp.vue
index ce6c68c..880361c 100644
--- a/frontend/src/views/apps/MapApp.vue
+++ b/frontend/src/views/apps/MapApp.vue
@@ -667,7 +667,7 @@ onBeforeUnmount(() => {
         component="button"
         type="button"
         class="map-control map-control--share"
-        variant="primary"
+        variant="glass"
         :aria-label="phone.t('Apps.easyShare.name')"
         @click="shareCurrentLocation"
       >
@@ -679,7 +679,7 @@ onBeforeUnmount(() => {
         component="button"
         type="button"
         class="map-control"
-        variant="neutral"
+        variant="glass"
         :aria-label="`${phone.t('Apps.map.switchStyle')}: ${phone.t(`Apps.map.styles.${mapStyle}`)}`"
         @click="cycleMapStyle"
       >
@@ -691,7 +691,7 @@ onBeforeUnmount(() => {
         component="button"
         type="button"
         class="map-control map-control--marker"
-        variant="neutral"
+        variant="glass"
         :disabled="placingMarker"
         :aria-label="phone.t('Apps.map.addMarker')"
         @click="startMarkerPlacement"
@@ -704,7 +704,7 @@ onBeforeUnmount(() => {
         component="button"
         type="button"
         class="map-control map-control--location"
-        variant="neutral"
+        variant="glass"
         :disabled="locating"
         :aria-label="phone.t('Apps.map.currentLocation')"
         @click="loadCurrentLocation(true)"
@@ -1015,14 +1015,16 @@ onBeforeUnmount(() => {
 }
 
 .map-control {
-  --sky-glass-solid: rgb(247 247 248 / 92%);
+  --sky-glass: rgb(247 247 248 / 72%);
+  --sky-hairline: rgb(0 0 0 / 16%);
   color: #151515;
 }
 .map-control--share {
-  color: #fff;
+  color: #007aff;
 }
 .sky-app-page--dark .map-control {
-  --sky-glass-solid: rgb(44 44 46 / 88%);
+  --sky-glass: rgb(44 44 46 / 62%);
+  --sky-hairline: rgb(255 255 255 / 16%);
   color: #fff;
 }
 
diff --git a/frontend/src/views/apps/MemoryApp.vue b/frontend/src/views/apps/MemoryApp.vue
index c2aa588..0065d9f 100644
--- a/frontend/src/views/apps/MemoryApp.vue
+++ b/frontend/src/views/apps/MemoryApp.vue
@@ -24,6 +24,7 @@ import type {
   MemoryDifficulty,
 } from '@/features/games/memory/types'
 import { usePhoneStore } from '@/stores/phone'
+import { SkyButton } from '@/ui'
 
 const phone = usePhoneStore()
 const memory = useMemoryStore()
@@ -135,7 +136,7 @@ onBeforeUnmount(() => {
       </div>
       <div class="memory-header__actions">
         <Sparkles :size="23" aria-hidden="true" />
-        <button
+        <SkyButton glass icon-only rounded
           type="button"
           :aria-label="phone.t(memory.soundEnabled ? 'Apps.memory.mute' : 'Apps.memory.unmute')"
           :title="phone.t(memory.soundEnabled ? 'Apps.memory.mute' : 'Apps.memory.unmute')"
@@ -143,7 +144,7 @@ onBeforeUnmount(() => {
         >
           <Volume2 v-if="memory.soundEnabled" :size="18" aria-hidden="true" />
           <VolumeX v-else :size="18" aria-hidden="true" />
-        </button>
+        </SkyButton>
       </div>
     </header>
 
@@ -182,7 +183,7 @@ onBeforeUnmount(() => {
 
     <section v-else class="memory-game">
       <div class="memory-stats">
-        <button
+        <SkyButton glass icon-only rounded
           type="button"
           class="memory-menu-button"
           :aria-label="phone.t('Apps.memory.backToMenu')"
@@ -190,7 +191,7 @@ onBeforeUnmount(() => {
           @click="returnToMenu"
         >
           <ChevronLeft :size="18" :stroke-width="2.6" aria-hidden="true" />
-        </button>
+        </SkyButton>
         <div>
           <span>{{ phone.t('Apps.memory.time') }}</span>
           <strong>{{ formatTime(memory.elapsedMs) }}</strong>
@@ -316,7 +317,7 @@ onBeforeUnmount(() => {
 }
 
 .memory-header__actions > svg,
-.memory-header__actions button {
+.memory-header__actions button:not(.sky-button--glass) {
   box-sizing: content-box;
   padding: 9px;
   border: 0;
@@ -325,6 +326,8 @@ onBeforeUnmount(() => {
   background: rgb(255 255 255 / 54%);
 }
 
+.memory-header__actions .sky-button--glass { color: #7658c7; }
+
 .memory-header__actions button {
   display: grid;
   place-items: center;
@@ -441,17 +444,16 @@ onBeforeUnmount(() => {
 .memory-stats div { height: 32px; display: grid; grid-template-rows: 10px 20px; align-content: center; justify-items: center; }
 .memory-stats span { color: #74698f; font-size: 10.5px; font-weight: 800; line-height: 10px; text-transform: uppercase; }
 .memory-stats strong { display: block; font-size: 19px; line-height: 20px; }
-.memory-stats button { justify-self: end; border: 0; color: #7052bf; background: transparent; font-size: 13px; font-weight: 800; }
+.memory-stats button:not(.sky-button--glass) { justify-self: end; border: 0; color: #7052bf; background: transparent; font-size: 13px; font-weight: 800; }
 .memory-stats .memory-menu-button {
+  --sky-touch-target: 32px;
   width: 32px;
   height: 32px;
   display: grid;
   place-items: center;
   justify-self: start;
   padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: rgb(255 255 255 / 48%);
+  color: #7052bf;
   cursor: pointer;
 }
 
diff --git a/frontend/src/views/apps/MessagesApp.contract.test.ts b/frontend/src/views/apps/MessagesApp.contract.test.ts
index 607eeb2..2b52260 100644
--- a/frontend/src/views/apps/MessagesApp.contract.test.ts
+++ b/frontend/src/views/apps/MessagesApp.contract.test.ts
@@ -90,7 +90,7 @@ describe('MessagesApp Sky UI contract', () => {
     expect(searchbarStart).toBeGreaterThan(-1)
     expect(fabStart).toBeGreaterThan(searchbarStart)
     expect(toolbar).toContain('v-model="search"')
-    expect(toolbar).toContain('variant="neutral"')
+    expect(toolbar).toContain('variant="glass"')
     expect(toolbar).toContain('@click="beginCompose"')
     expect(toolbar).toContain('<SquarePen :size="21" />')
     expect(inbox).not.toContain('messages-sky-compose-navigation')
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index e39cd85..5be08bf 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -1235,7 +1235,7 @@ onBeforeUnmount(() => {
         :clear-label="phone.t('Common.clear')"
       />
       <SkyFab
-        variant="neutral"
+        variant="glass"
         :aria-label="phone.t('Apps.messages.compose')"
         @click="beginCompose"
       >
diff --git a/frontend/src/views/apps/MinesweeperApp.vue b/frontend/src/views/apps/MinesweeperApp.vue
index 63b1612..0a1eb5d 100644
--- a/frontend/src/views/apps/MinesweeperApp.vue
+++ b/frontend/src/views/apps/MinesweeperApp.vue
@@ -23,6 +23,7 @@ import type {
   MinesweeperDifficulty,
 } from '@/features/games/minesweeper/types'
 import { usePhoneStore } from '@/stores/phone'
+import { SkyButton } from '@/ui'
 
 const phone = usePhoneStore()
 const minesweeper = useMinesweeperStore()
@@ -208,7 +209,7 @@ onBeforeUnmount(() => {
         <span>{{ phone.t('Apps.minesweeper.eyebrow') }}</span>
         <h1>{{ phone.t('Apps.minesweeper.name') }}</h1>
       </div>
-      <button
+      <SkyButton glass icon-only rounded
         type="button"
         :aria-label="
           phone.t(
@@ -221,7 +222,7 @@ onBeforeUnmount(() => {
       >
         <Volume2 v-if="minesweeper.soundEnabled" :size="18" aria-hidden="true" />
         <VolumeX v-else :size="18" aria-hidden="true" />
-      </button>
+      </SkyButton>
     </header>
 
     <section v-if="minesweeper.menuOpen" class="minesweeper-menu">
@@ -275,7 +276,7 @@ onBeforeUnmount(() => {
       }"
     >
       <div class="minesweeper-toolbar">
-        <button
+        <SkyButton glass icon-only rounded
           type="button"
           class="minesweeper-toolbar__icon"
           :aria-label="phone.t('Apps.minesweeper.backToMenu')"
@@ -283,7 +284,7 @@ onBeforeUnmount(() => {
           @click.stop="minesweeper.showMenu()"
         >
           <ChevronLeft :size="19" :stroke-width="2.7" aria-hidden="true" />
-        </button>
+        </SkyButton>
         <div>
           <span>{{ phone.t('Apps.minesweeper.mines') }}</span>
           <strong>{{ minesRemaining }}</strong>
@@ -292,14 +293,14 @@ onBeforeUnmount(() => {
           <span>{{ phone.t('Apps.minesweeper.time') }}</span>
           <strong>{{ formatTime(minesweeper.elapsedMs) }}</strong>
         </div>
-        <button
+        <SkyButton glass icon-only rounded
           type="button"
           class="minesweeper-toolbar__icon"
           :aria-label="phone.t('Apps.minesweeper.restart')"
           @click="restart"
         >
           <RotateCcw :size="17" :stroke-width="2.5" aria-hidden="true" />
-        </button>
+        </SkyButton>
       </div>
 
       <div
@@ -438,8 +439,8 @@ onBeforeUnmount(() => {
 .minesweeper-header span { display: block; color: #59878a; font-size: 9px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
 .minesweeper-header h1 { margin: 0; font-size: 24px; line-height: 1; letter-spacing: -0.7px; }
 
-.minesweeper-header button,
-.minesweeper-toolbar__icon {
+.minesweeper-header button:not(.sky-button--glass),
+.minesweeper-toolbar__icon:not(.sky-button--glass) {
   width: 36px;
   height: 36px;
   display: grid;
@@ -452,6 +453,9 @@ onBeforeUnmount(() => {
   box-shadow: 0 4px 10px rgb(23 73 75 / 8%);
 }
 
+.minesweeper-header .sky-button--glass { color: #246871; }
+.minesweeper-toolbar .sky-button--glass { --sky-touch-target: 32px; width: 32px; height: 32px; color: #246871; }
+
 .minesweeper-menu {
   height: calc(100% - 55px);
   display: flex;
diff --git a/frontend/src/views/apps/NeonDropApp.vue b/frontend/src/views/apps/NeonDropApp.vue
index 1f24c40..6452a62 100644
--- a/frontend/src/views/apps/NeonDropApp.vue
+++ b/frontend/src/views/apps/NeonDropApp.vue
@@ -25,6 +25,7 @@ import type {
   NeonDropPieceKind,
 } from '@/features/games/neon-drop/types'
 import { usePhoneStore } from '@/stores/phone'
+import { SkyButton } from '@/ui'
 
 type RenderCell = {
   active: boolean
@@ -206,7 +207,10 @@ onBeforeUnmount(() => {
         <span>{{ phone.t('Apps.neonDrop.eyebrow') }}</span>
         <h1>{{ phone.t('Apps.neonDrop.name') }}</h1>
       </div>
-      <button
+      <SkyButton
+        glass
+        icon-only
+        rounded
         type="button"
         :aria-label="
           phone.t(
@@ -219,7 +223,7 @@ onBeforeUnmount(() => {
           v-else
           :size="18"
         />
-      </button>
+      </SkyButton>
     </header>
 
     <section v-if="neon.menuOpen" class="neon-menu">
@@ -274,13 +278,16 @@ onBeforeUnmount(() => {
 
     <section v-else-if="game" class="neon-game">
       <div class="neon-toolbar">
-        <button
+        <SkyButton
+          glass
+          icon-only
+          rounded
           type="button"
           :aria-label="phone.t('Apps.neonDrop.backToMenu')"
           @click="neon.showMenu()"
         >
           <ChevronLeft :size="19" />
-        </button>
+        </SkyButton>
         <div>
           <span>{{ phone.t('Apps.neonDrop.score') }}</span
           ><strong>{{ game.score }}</strong>
@@ -289,7 +296,10 @@ onBeforeUnmount(() => {
           <span>{{ phone.t('Apps.neonDrop.lines') }}</span
           ><strong>{{ game.lines }}</strong>
         </div>
-        <button
+        <SkyButton
+          glass
+          icon-only
+          rounded
           type="button"
           :aria-label="phone.t('Apps.neonDrop.pause')"
           @click="togglePause"
@@ -299,7 +309,7 @@ onBeforeUnmount(() => {
             :size="16"
             fill="currentColor"
           /><Play v-else :size="16" fill="currentColor" />
-        </button>
+        </SkyButton>
       </div>
 
       <div class="neon-play-area">
@@ -403,8 +413,8 @@ onBeforeUnmount(() => {
   font-size: 32px;
   line-height: 1;
 }
-.neon-header button,
-.neon-toolbar button {
+.neon-header button:not(.sky-button--glass),
+.neon-toolbar button:not(.sky-button--glass) {
   width: 35px;
   height: 35px;
   display: grid;
@@ -415,6 +425,10 @@ onBeforeUnmount(() => {
   color: #fff;
   background: #ffffff0d;
 }
+.neon-header .sky-button--glass,
+.neon-toolbar .sky-button--glass {
+  color: #fff;
+}
 .neon-menu {
   height: calc(100% - 54px);
   display: flex;
@@ -614,11 +628,9 @@ onBeforeUnmount(() => {
   line-height: 20px;
 }
 .neon-toolbar button {
+  --sky-touch-target: 32px;
   width: 32px;
   height: 32px;
-  border: 0;
-  border-radius: 50%;
-  box-shadow: none;
 }
 .neon-play-area {
   position: absolute;
diff --git a/frontend/src/views/apps/NumberMergeApp.vue b/frontend/src/views/apps/NumberMergeApp.vue
index 897c649..c12294a 100644
--- a/frontend/src/views/apps/NumberMergeApp.vue
+++ b/frontend/src/views/apps/NumberMergeApp.vue
@@ -14,6 +14,7 @@ import type {
   NumberMergeTile,
 } from '@/features/games/number-merge/types'
 import { usePhoneStore } from '@/stores/phone'
+import { SkyButton } from '@/ui'
 
 const phone = usePhoneStore()
 const numberMerge = useNumberMergeStore()
@@ -135,7 +136,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
         <span>{{ phone.t('Apps.numberMerge.eyebrow') }}</span>
         <h1>{{ phone.t('Apps.numberMerge.name') }}</h1>
       </div>
-      <button
+      <SkyButton glass icon-only rounded
         type="button"
         :aria-label="
           phone.t(
@@ -155,7 +156,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
       >
         <Volume2 v-if="numberMerge.soundEnabled" :size="18" aria-hidden="true" />
         <VolumeX v-else :size="18" aria-hidden="true" />
-      </button>
+      </SkyButton>
     </header>
 
     <section v-if="numberMerge.menuOpen" class="number-merge-menu">
@@ -210,7 +211,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
 
     <section v-else-if="game" class="number-merge-game">
       <div class="number-merge-toolbar">
-        <button
+        <SkyButton glass icon-only rounded
           type="button"
           class="number-merge-toolbar__icon"
           :aria-label="phone.t('Apps.numberMerge.backToMenu')"
@@ -218,7 +219,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
           @click="numberMerge.showMenu"
         >
           <ChevronLeft :size="19" :stroke-width="2.7" aria-hidden="true" />
-        </button>
+        </SkyButton>
         <div>
           <span>{{ phone.t('Apps.numberMerge.score') }}</span>
           <strong>{{ formatScore(game.score) }}</strong>
@@ -227,7 +228,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
           <span>{{ phone.t('Apps.numberMerge.best') }}</span>
           <strong>{{ formatScore(numberMerge.bestScore) }}</strong>
         </div>
-        <button
+        <SkyButton glass icon-only rounded
           type="button"
           class="number-merge-toolbar__icon number-merge-toolbar__restart"
           :aria-label="phone.t('Apps.numberMerge.newGame')"
@@ -235,7 +236,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
           @click="requestNewGame"
         >
           <RotateCcw :size="17" :stroke-width="2.5" aria-hidden="true" />
-        </button>
+        </SkyButton>
       </div>
 
       <div
@@ -373,8 +374,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   overflow-wrap: anywhere;
 }
 
-.number-merge-header button,
-.number-merge-toolbar__icon {
+.number-merge-header button:not(.sky-button--glass),
+.number-merge-toolbar__icon:not(.sky-button--glass) {
   width: 36px;
   height: 36px;
   display: grid;
@@ -388,6 +389,9 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
   cursor: pointer;
 }
 
+.number-merge-header .sky-button--glass { color: #784c3c; }
+.number-merge-toolbar .sky-button--glass { --sky-touch-target: 32px; width: 32px; height: 32px; color: #784c3c; }
+
 .number-merge-menu {
   height: calc(100% - 55px);
   min-height: 0;
diff --git a/frontend/src/views/apps/PicstagramApp.vue b/frontend/src/views/apps/PicstagramApp.vue
index 0346478..80fde2d 100644
--- a/frontend/src/views/apps/PicstagramApp.vue
+++ b/frontend/src/views/apps/PicstagramApp.vue
@@ -1062,14 +1062,20 @@ onBeforeUnmount(() => {
                     selectedPost.media.length
                   }}</span
                 >
-                <button
+                <SkyButton
+                  glass
+                  icon-only
+                  rounded
                   class="ps-carousel-button ps-carousel-button--left"
                   :disabled="(carouselIndexes[selectedPost.id] ?? 0) === 0"
                   @click="moveCarousel(selectedPost, -1)"
                 >
                   <ChevronLeft />
-                </button>
-                <button
+                </SkyButton>
+                <SkyButton
+                  glass
+                  icon-only
+                  rounded
                   class="ps-carousel-button ps-carousel-button--right"
                   :disabled="
                     (carouselIndexes[selectedPost.id] ?? 0) ===
@@ -1078,7 +1084,7 @@ onBeforeUnmount(() => {
                   @click="moveCarousel(selectedPost, 1)"
                 >
                   <ChevronRight />
-                </button>
+                </SkyButton>
                 <div class="ps-dots">
                   <span
                     v-for="(_, index) in selectedPost.media"
@@ -1271,14 +1277,20 @@ onBeforeUnmount(() => {
                     post.media.length
                   }}</span
                 >
-                <button
+                <SkyButton
+                  glass
+                  icon-only
+                  rounded
                   class="ps-carousel-button ps-carousel-button--left"
                   :disabled="(carouselIndexes[post.id] ?? 0) === 0"
                   @click="moveCarousel(post, -1)"
                 >
                   <ChevronLeft />
-                </button>
-                <button
+                </SkyButton>
+                <SkyButton
+                  glass
+                  icon-only
+                  rounded
                   class="ps-carousel-button ps-carousel-button--right"
                   :disabled="
                     (carouselIndexes[post.id] ?? 0) === post.media.length - 1
@@ -1286,7 +1298,7 @@ onBeforeUnmount(() => {
                   @click="moveCarousel(post, 1)"
                 >
                   <ChevronRight />
-                </button>
+                </SkyButton>
                 <div class="ps-dots">
                   <span
                     v-for="(_, index) in post.media"
@@ -1487,22 +1499,28 @@ onBeforeUnmount(() => {
                 </button>
               </div>
               <template v-if="selectedMedia.length > 1">
-                <button
+                <SkyButton
+                  glass
+                  icon-only
+                  rounded
                   class="ps-selection-arrow ps-selection-arrow--left"
                   :aria-label="t('previousPhoto')"
                   :disabled="composePreviewIndex === 0"
                   @click="moveComposePreview(-1)"
                 >
                   <ChevronLeft />
-                </button>
-                <button
+                </SkyButton>
+                <SkyButton
+                  glass
+                  icon-only
+                  rounded
                   class="ps-selection-arrow ps-selection-arrow--right"
                   :aria-label="t('nextPhoto')"
                   :disabled="composePreviewIndex === selectedMedia.length - 1"
                   @click="moveComposePreview(1)"
                 >
                   <ChevronRight />
-                </button>
+                </SkyButton>
                 <span class="ps-selection-counter">
                   {{ composePreviewIndex + 1 }}/{{ selectedMedia.length }}
                 </span>
@@ -2858,12 +2876,11 @@ button {
   top: 50%;
   display: grid;
   place-items: center;
-  width: 34px;
-  height: 34px;
+  width: 44px;
+  min-width: 44px;
+  height: 44px;
+  min-height: 44px;
   padding: 0;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.58);
   color: white;
   transform: translateY(-50%);
 }
@@ -3191,12 +3208,11 @@ button {
   top: 50%;
   display: grid;
   place-items: center;
-  width: 34px;
-  height: 34px;
+  width: 44px;
+  min-width: 44px;
+  height: 44px;
+  min-height: 44px;
   padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.62);
   color: white;
   transform: translateY(-50%);
 }
diff --git a/frontend/src/views/apps/SkyFlappyApp.vue b/frontend/src/views/apps/SkyFlappyApp.vue
index 1adbc4c..7a91f00 100644
--- a/frontend/src/views/apps/SkyFlappyApp.vue
+++ b/frontend/src/views/apps/SkyFlappyApp.vue
@@ -9,6 +9,7 @@ import SkyFlappyBird from '@/features/games/sky-flappy/SkyFlappyBird.vue'
 import { useSkyFlappyStore } from '@/features/games/sky-flappy/store'
 import type { SkyFlappyDesign, SkyFlappyObstacle } from '@/features/games/sky-flappy/types'
 import { usePhoneStore } from '@/stores/phone'
+import { SkyButton } from '@/ui'
 
 const phone = usePhoneStore()
 const flappy = useSkyFlappyStore()
@@ -116,9 +117,9 @@ onBeforeUnmount(() => {
   >
     <header v-if="flappy.menuOpen" class="flappy-header">
       <div><span>{{ phone.t('Apps.skyFlappy.eyebrow') }}</span><h1>{{ phone.t('Apps.skyFlappy.name') }}</h1></div>
-      <button type="button" :aria-label="phone.t(flappy.soundEnabled ? 'Apps.skyFlappy.mute' : 'Apps.skyFlappy.unmute')" @click="toggleSound">
+      <SkyButton glass icon-only rounded type="button" :aria-label="phone.t(flappy.soundEnabled ? 'Apps.skyFlappy.mute' : 'Apps.skyFlappy.unmute')" @click="toggleSound">
         <Volume2 v-if="flappy.soundEnabled" :size="18" /><VolumeX v-else :size="18" />
-      </button>
+      </SkyButton>
     </header>
 
     <section v-if="flappy.menuOpen" class="flappy-menu">
@@ -141,10 +142,10 @@ onBeforeUnmount(() => {
 
     <section v-else-if="game" class="flappy-game">
       <div class="flappy-toolbar">
-        <button type="button" :aria-label="phone.t('Apps.skyFlappy.backToMenu')" @pointerdown.stop="flappy.showMenu()" @click.stop="flappy.showMenu()"><ChevronLeft :size="19" /></button>
+        <SkyButton glass icon-only rounded type="button" :aria-label="phone.t('Apps.skyFlappy.backToMenu')" @pointerdown.stop="flappy.showMenu()" @click.stop="flappy.showMenu()"><ChevronLeft :size="19" /></SkyButton>
         <div><span>{{ phone.t('Apps.skyFlappy.score') }}</span><strong>{{ game.score }}</strong></div>
         <div><span>{{ phone.t('Apps.skyFlappy.best') }}</span><strong>{{ flappy.highScore }}</strong></div>
-        <button type="button" :aria-label="phone.t('Apps.skyFlappy.pause')" @click="togglePause"><Pause v-if="game.status === 'playing'" :size="16" fill="currentColor" /><Play v-else :size="16" fill="currentColor" /></button>
+        <SkyButton glass icon-only rounded type="button" :aria-label="phone.t('Apps.skyFlappy.pause')" @click="togglePause"><Pause v-if="game.status === 'playing'" :size="16" fill="currentColor" /><Play v-else :size="16" fill="currentColor" /></SkyButton>
       </div>
 
       <button type="button" class="flappy-stage" :class="{ 'flappy-stage--crashed': game.status === 'over' && !gameOverVisible }" :aria-label="phone.t('Apps.skyFlappy.flap')" @pointerdown.stop.prevent="flap">
@@ -169,7 +170,7 @@ onBeforeUnmount(() => {
 .flappy-app { --sky-a:#50d8f2;--sky-b:#765ce8;--tower:#574be8;--tower-light:#9b94ff;--tower-dark:#3429a6;--tower-glow:#79e7ff; position:absolute;inset:0;overflow:hidden;padding:52px 16px 27px;color:#fff;background:linear-gradient(160deg,#19375e,#433b80);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;user-select:none;touch-action:manipulation; }
 .flappy-app--playing { padding:0; }
 .flappy-app--neon { --sky-a:#151c58;--sky-b:#a329a2;--tower:#19dfe6;--tower-light:#82ffff;--tower-dark:#087f91;--tower-glow:#26fbff; }.flappy-app--storm { --sky-a:#6f8497;--sky-b:#2b3955;--tower:#df765f;--tower-light:#ffb18e;--tower-dark:#8d3e39;--tower-glow:#ff997d; }
-.flappy-header{height:55px;display:flex;align-items:center;justify-content:space-between}.flappy-header span{display:block;color:#d9e9fa;font-size:14px;font-weight:850;letter-spacing:1.1px;text-transform:uppercase}.flappy-header h1{margin:1px 0 0;font-size:32px;line-height:1}.flappy-header button,.flappy-toolbar button{width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #ffffff35;border-radius:12px;color:#fff;background:#ffffff18}
+.flappy-header{height:55px;display:flex;align-items:center;justify-content:space-between}.flappy-header span{display:block;color:#d9e9fa;font-size:14px;font-weight:850;letter-spacing:1.1px;text-transform:uppercase}.flappy-header h1{margin:1px 0 0;font-size:32px;line-height:1}.flappy-header button:not(.sky-button--glass),.flappy-toolbar button:not(.sky-button--glass){width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #ffffff35;border-radius:12px;color:#fff;background:#ffffff18}.flappy-header .sky-button--glass,.flappy-toolbar .sky-button--glass{color:#fff}
 .flappy-menu{height:calc(100% - 55px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.flappy-menu__hero{position:relative;width:220px;height:210px;overflow:hidden;border-radius:28px;background:linear-gradient(var(--sky-a),var(--sky-b));box-shadow:inset 0 0 28px #223c6d35,0 18px 32px #101b3b66}.flappy-menu__hero::before{position:absolute;z-index:0;top:22px;left:25px;width:39px;height:39px;border-radius:50%;background:#ffe8a7cc;box-shadow:0 0 18px #fff1b46b;content:""}.flappy-menu__hero::after{position:absolute;z-index:1;bottom:30px;left:-12px;width:68px;height:18px;border-radius:999px;background:#ffffff3d;box-shadow:27px -9px 0 3px #ffffff36,57px 1px 0 -2px #ffffff2c;content:""}.flappy-menu__tower{position:absolute;z-index:3;right:10px;width:42px;background:linear-gradient(90deg,color-mix(in srgb,var(--tower),white 30%),var(--tower));box-shadow:inset 7px 0 0 #ffffff22,inset -6px 0 9px #0003}.flappy-menu__tower::after{position:absolute;left:-8px;width:58px;height:22px;border:3px solid color-mix(in srgb,var(--tower),black 22%);border-radius:7px;background:linear-gradient(90deg,color-mix(in srgb,var(--tower),white 36%),var(--tower));box-shadow:inset 0 4px 0 #ffffff26;content:""}.flappy-menu__tower--top{top:0;height:61px;border-radius:0 0 5px 5px}.flappy-menu__tower--top::after{bottom:-11px}.flappy-menu__tower--bottom{bottom:0;height:67px;border-radius:5px 5px 0 0}.flappy-menu__tower--bottom::after{top:-11px}.flappy-menu__trail{position:absolute;z-index:2;top:102px;left:11px;width:46px;height:4px;border-radius:99px;background:#edfbffb8;box-shadow:13px 12px 0 -1px #e9faff8c,6px -12px 0 -1px #e9faff73;animation:flappy-trail 1s ease-in-out infinite}.sky-bird{position:absolute;z-index:4;width:66px;height:46px;overflow:visible;filter:drop-shadow(0 4px 5px #071d3e66)}.sky-bird :deep(path){stroke-linecap:round;stroke-linejoin:round}.sky-bird :deep(.sky-flappy-bird__far-wing){fill:#2d7188;stroke:#123f57;stroke-width:2}.sky-bird :deep(.sky-flappy-bird__far-wing path:last-child){fill:none;stroke:#8ec6ce;stroke-width:1.4;opacity:.65}.sky-bird :deep(.sky-flappy-bird__tail){fill:#285e78;stroke:#123f57;stroke-width:2}.sky-bird :deep(.sky-flappy-bird__body){fill:url(#sky-bird-body);stroke:#123f57;stroke-width:2}.sky-bird :deep(.sky-flappy-bird__belly){fill:#b7e5df;opacity:.84}.sky-bird :deep(.sky-flappy-bird__neck){fill:#377f98}.sky-bird :deep(.sky-flappy-bird__wing){transform-box:view-box;transform-origin:52px 38px}.sky-bird :deep(.sky-flappy-bird__wing-shape){fill:url(#sky-bird-wing);stroke:#123f57;stroke-width:2}.sky-bird :deep(.sky-flappy-bird__feather){fill:none;stroke:#d4f0ed;stroke-width:1.5;opacity:.78}.sky-bird :deep(.sky-flappy-bird__face){fill:#d8f0e9}.sky-bird :deep(.sky-flappy-bird__eye-ring){fill:#f5fbf7}.sky-bird :deep(.sky-flappy-bird__eye){fill:#102d3d}.sky-bird :deep(.sky-flappy-bird__beak){fill:#f2a84b;stroke:#6f4727;stroke-width:1.5}.sky-bird--hero{top:72px;left:42px;width:100px;height:69px;animation:flappy-hero 1.1s ease-in-out infinite alternate}.sky-bird--hero :deep(.sky-flappy-bird__wing){animation:flappy-bird-glide 1.1s ease-in-out infinite}.sky-bird--hero :deep(.sky-flappy-bird__far-wing){transform-box:view-box;transform-origin:50px 38px;animation:flappy-bird-far-glide 1.1s ease-in-out infinite}.flappy-menu__copy>span{color:#ffda70;font-size:9px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.flappy-menu__copy h2{margin:3px 0 5px;font-size:21px}.flappy-menu__copy p{max-width:275px;margin:0;color:#c0c8df;font-size:10px;line-height:1.4}.flappy-record{width:100%;display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border:1px solid #ffffff14;border-radius:13px;background:#ffffff0c}.flappy-record span{color:#bdc8df;font-size:9px;font-weight:800;text-transform:uppercase}.flappy-record strong{font-size:19px}.flappy-designs{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.flappy-designs button{display:grid;place-items:center;gap:3px;padding:7px 3px;border:1px solid #ffffff12;border-radius:12px;color:#ccd4e9;background:#ffffff0a;font-size:8px}.flappy-designs button.active{border-color:#ffdd72;color:#fff;background:#ffffff1b}.flappy-designs i{width:26px;height:13px;border-radius:8px}.flappy-designs__dawn{background:linear-gradient(90deg,#58d6ee,#ff9b80)}.flappy-designs__neon{background:linear-gradient(90deg,#24255f,#ef55ca)}.flappy-designs__storm{background:linear-gradient(90deg,#71899b,#253750)}.flappy-primary,.flappy-secondary{width:100%;min-height:43px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:14px;font-size:11px;font-weight:850}.flappy-primary{border:0;color:#173353;background:linear-gradient(135deg,#ffe16c,#ff9d68)}.flappy-secondary{border:1px solid #ffffff18;color:#fff;background:#ffffff0b}.flappy-menu>p,.flappy-game__hint{margin:0;color:#aeb9d2;font-size:9px}
 .flappy-game{position:absolute;inset:0}.flappy-toolbar{position:absolute;z-index:10;top:48px;right:14px;left:14px;height:42px;display:grid;grid-template-columns:36px 1fr 1fr 36px;align-items:center;gap:7px;padding:4px 6px;border:1px solid #ffffff2b;border-radius:22px;background:#263c6da8;box-shadow:0 8px 24px #10193455;backdrop-filter:blur(14px)}.flappy-toolbar div{display:grid;justify-items:center}.flappy-toolbar span{color:#bac9df;font-size:8px;font-weight:850;text-transform:uppercase}.flappy-toolbar strong{font-size:16px}.flappy-toolbar button{width:34px;height:34px;border:0;border-radius:50%;box-shadow:none}.flappy-stage{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;padding:0;border:0;border-radius:0;background:linear-gradient(var(--sky-a),var(--sky-b));box-shadow:inset 0 0 35px #15244c55;touch-action:manipulation}.flappy-clouds{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}.flappy-clouds i{--cloud-scale:1;--cloud-opacity:.34;--cloud-duration:18s;--cloud-delay:0s;position:absolute;left:100%;width:70px;height:18px;border-radius:999px;background:linear-gradient(180deg,#ffffffd9,#eaf7ff9c);box-shadow:0 8px 16px #24376518;opacity:var(--cloud-opacity);animation:cloud-drift var(--cloud-duration) linear var(--cloud-delay) infinite;will-change:transform}.flappy-clouds i::before{position:absolute;bottom:4px;left:12px;width:29px;height:29px;border-radius:50%;background:#f8fcffe6;box-shadow:22px -8px 0 4px #f7fcff,40px 1px 0 -2px #eef9ff;content:""}.flappy-clouds i::after{position:absolute;right:8px;bottom:-3px;left:8px;height:8px;border-radius:50%;background:#bcdff477;filter:blur(4px);content:""}.flappy-clouds i:nth-child(1){--cloud-scale:.7;--cloud-opacity:.3;--cloud-duration:20s;--cloud-delay:-4s;top:9%}.flappy-clouds i:nth-child(2){--cloud-scale:1.05;--cloud-opacity:.4;--cloud-duration:15s;--cloud-delay:-11s;top:22%}.flappy-clouds i:nth-child(3){--cloud-scale:.52;--cloud-opacity:.25;--cloud-duration:23s;--cloud-delay:-17s;top:38%}.flappy-clouds i:nth-child(4){--cloud-scale:.88;--cloud-opacity:.36;--cloud-duration:17s;--cloud-delay:-7s;top:53%}.flappy-clouds i:nth-child(5){--cloud-scale:1.18;--cloud-opacity:.42;--cloud-duration:14s;--cloud-delay:-2s;top:68%}.flappy-clouds i:nth-child(6){--cloud-scale:.62;--cloud-opacity:.27;--cloud-duration:21s;--cloud-delay:-14s;top:78%}.flappy-clouds i:nth-child(7){--cloud-scale:.96;--cloud-opacity:.34;--cloud-duration:16s;--cloud-delay:-9s;top:86%}.flappy-obstacle{position:absolute;z-index:2;top:0;bottom:0}.flappy-obstacle span{position:absolute;right:0;left:0;background:linear-gradient(90deg,color-mix(in srgb,var(--tower),white 20%),var(--tower));box-shadow:inset -6px 0 8px #0003,0 0 13px #17204e55}.flappy-obstacle span::after{position:absolute;right:-4px;left:-4px;height:14px;border-radius:6px;background:color-mix(in srgb,var(--tower),white 10%);box-shadow:inset 0 3px 0 #ffffff25;content:""}.flappy-obstacle__top{top:0;border-radius:0 0 7px 7px}.flappy-obstacle__top::after{bottom:0}.flappy-obstacle__bottom{bottom:0;border-radius:7px 7px 0 0}.flappy-obstacle__bottom::after{top:0}.sky-bird--player{left:23%;animation:flappy-wing .24s ease-out}.sky-bird--player :deep(.sky-flappy-bird__wing){animation:flappy-bird-flap .24s cubic-bezier(.2,.75,.35,1)}.sky-bird--player :deep(.sky-flappy-bird__far-wing){transform-box:view-box;transform-origin:50px 38px;animation:flappy-bird-far-flap .24s cubic-bezier(.2,.75,.35,1)}.flappy-ready{position:absolute;z-index:6;top:36%;left:50%;padding:9px 15px;border-radius:17px;background:#15284fbb;font-size:11px;transform:translateX(-50%)}.flappy-horizon{position:absolute;z-index:3;right:0;bottom:0;left:0;height:12px;background:#263a62;box-shadow:0 -5px 14px #ffffff26}.flappy-stage--crashed{animation:flappy-crash .55s ease-out}.flappy-game__hint{position:absolute;z-index:6;right:45px;bottom:27px;left:45px;margin:0;padding:7px 10px;border-radius:999px;background:#263c6d91;backdrop-filter:blur(10px);text-align:center;pointer-events:none}.flappy-overlay{position:absolute;z-index:12;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:28px;background:#101a38dc;backdrop-filter:blur(7px);text-align:center}.flappy-overlay>svg{color:#ffdc71}.flappy-overlay>span{color:#ffad78;font-size:9px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.flappy-overlay h2{margin:0 0 5px;font-size:26px}
 .flappy-menu__tower{border:2px solid var(--tower-dark);background:linear-gradient(90deg,var(--tower-light),var(--tower),var(--tower-dark));box-shadow:inset 7px 0 0 #ffffff38,inset -6px 0 9px #0004,0 0 18px var(--tower-glow)}
@@ -190,7 +191,7 @@ onBeforeUnmount(() => {
 .flappy-toolbar strong{display:block;font-size:19px;line-height:20px}
 .flappy-toolbar{top:66px;right:18px;left:18px;height:42px;grid-template-columns:32px 1fr 1fr 32px;gap:4px;padding:4px;border-radius:21px;box-sizing:border-box}
 .flappy-toolbar div{height:32px;display:grid;grid-template-rows:10px 20px;align-content:center;justify-items:center}
-.flappy-toolbar button{width:32px;height:32px}
+.flappy-toolbar button{--sky-touch-target:32px;width:32px;height:32px}
 .flappy-clouds{top:110px}
 .flappy-stage{border:0;box-shadow:inset 0 0 35px #15244c38}
 .flappy-obstacle span{border:2px solid var(--tower-dark);background:linear-gradient(90deg,var(--tower-light),var(--tower),var(--tower-dark));box-shadow:inset 7px 0 0 #ffffff42,inset -6px 0 8px #0004,0 0 18px var(--tower-glow)}
diff --git a/frontend/src/views/apps/SkyUiApps.contract.test.ts b/frontend/src/views/apps/SkyUiApps.contract.test.ts
index 34a5f6f..39e82f3 100644
--- a/frontend/src/views/apps/SkyUiApps.contract.test.ts
+++ b/frontend/src/views/apps/SkyUiApps.contract.test.ts
@@ -90,4 +90,31 @@ describe('phone apps use Sky UI', () => {
       expect(source, file).not.toMatch(/(?:citymarkt|pages)__toast/)
     }
   })
+
+  it('uses shared liquid glass for remaining compact interaction controls', () => {
+    const minimumGlassButtons: Record<string, number> = {
+      'CameraApp.vue': 2,
+      'FeatherApp.vue': 2,
+      'FlareApp.vue': 1,
+      'FlipTokApp.vue': 2,
+      'MemoryApp.vue': 2,
+      'MinesweeperApp.vue': 3,
+      'NeonDropApp.vue': 3,
+      'NumberMergeApp.vue': 3,
+      'PicstagramApp.vue': 6,
+      'SkyFlappyApp.vue': 3,
+      'SnakeApp.vue': 2,
+      'TowerStackApp.vue': 3,
+      'WeazelNewsApp.vue': 2,
+    }
+
+    for (const [file, minimum] of Object.entries(minimumGlassButtons)) {
+      const source = appSources.find((app) => app.file === file)?.source ?? ''
+      const glassButtons = source.match(
+        /<(?:SkyButton|sky-button)(?=[^>]*\bglass\b)[^>]*>/g,
+      )
+
+      expect(glassButtons?.length ?? 0, file).toBeGreaterThanOrEqual(minimum)
+    }
+  })
 })
diff --git a/frontend/src/views/apps/SnakeApp.vue b/frontend/src/views/apps/SnakeApp.vue
index a84302f..fcaec74 100644
--- a/frontend/src/views/apps/SnakeApp.vue
+++ b/frontend/src/views/apps/SnakeApp.vue
@@ -17,6 +17,7 @@ import type {
   SnakeSpeed,
 } from '@/features/games/snake/types'
 import { usePhoneStore } from '@/stores/phone'
+import { SkyButton } from '@/ui'
 
 const phone = usePhoneStore()
 const snake = useSnakeStore()
@@ -205,7 +206,7 @@ onBeforeUnmount(() => {
 
     <section v-else class="snake-game">
       <div class="snake-game__meta">
-        <button
+        <SkyButton glass icon-only rounded
           type="button"
           class="snake-game__back"
           :aria-label="phone.t('Apps.snake.backToMenu')"
@@ -213,13 +214,16 @@ onBeforeUnmount(() => {
           @click="returnToMenu"
         >
           <ChevronLeft :size="18" :stroke-width="2.7" aria-hidden="true" />
-        </button>
+        </SkyButton>
         <div>
           <span>{{ phone.t('Apps.snake.score') }}</span>
           <strong>{{ game.score }}</strong>
         </div>
-        <button
+        <SkyButton
           v-if="game.status !== 'game-over'"
+          glass
+          icon-only
+          rounded
           type="button"
           class="snake-game__pause"
           :aria-label="
@@ -233,7 +237,7 @@ onBeforeUnmount(() => {
         >
           <Play v-if="game.status === 'paused'" :size="18" fill="currentColor" />
           <Pause v-else :size="18" fill="currentColor" />
-        </button>
+        </SkyButton>
       </div>
 
       <div
@@ -517,14 +521,12 @@ onBeforeUnmount(() => {
 }
 
 .snake-game__meta button {
+  --sky-touch-target: 32px;
   width: 32px;
   height: 32px;
   display: grid;
   place-items: center;
-  border: 0;
-  border-radius: 50%;
   color: #dff6d9;
-  background: rgb(255 255 255 / 8%);
 }
 
 .snake-game__meta .snake-game__pause { justify-self: end; }
diff --git a/frontend/src/views/apps/TowerStackApp.vue b/frontend/src/views/apps/TowerStackApp.vue
index ecdc347..7cc0e95 100644
--- a/frontend/src/views/apps/TowerStackApp.vue
+++ b/frontend/src/views/apps/TowerStackApp.vue
@@ -23,6 +23,7 @@ import type {
   TowerBlock,
 } from '@/features/games/tower-stack/types'
 import { usePhoneStore } from '@/stores/phone'
+import { SkyButton } from '@/ui'
 
 const phone = usePhoneStore()
 const tower = useTowerStackStore()
@@ -185,14 +186,17 @@ onBeforeUnmount(() => {
         <span>{{ phone.t('Apps.towerStack.eyebrow') }}</span>
         <h1>{{ phone.t('Apps.towerStack.name') }}</h1>
       </div>
-      <button
+      <SkyButton
+        glass
+        icon-only
+        rounded
         type="button"
         :aria-label="phone.t(tower.soundEnabled ? 'Apps.towerStack.mute' : 'Apps.towerStack.unmute')"
         @click="toggleSound"
       >
         <Volume2 v-if="tower.soundEnabled" :size="18" aria-hidden="true" />
         <VolumeX v-else :size="18" aria-hidden="true" />
-      </button>
+      </SkyButton>
     </header>
 
     <section v-if="tower.menuOpen" class="tower-menu">
@@ -232,18 +236,21 @@ onBeforeUnmount(() => {
 
     <section v-else-if="game" class="tower-game">
       <div class="tower-toolbar">
-        <button
+        <SkyButton
+          glass
+          icon-only
+          rounded
           type="button"
           :aria-label="phone.t('Apps.towerStack.backToMenu')"
           @pointerdown.stop="tower.showMenu()"
           @click.stop="tower.showMenu()"
-        ><ChevronLeft :size="19" /></button>
+        ><ChevronLeft :size="19" /></SkyButton>
         <div><span>{{ phone.t('Apps.towerStack.height') }}</span><strong>{{ game.blocks.length - 1 }}</strong></div>
         <div><span>{{ phone.t('Apps.towerStack.score') }}</span><strong>{{ game.score }}</strong></div>
-        <button type="button" :aria-label="phone.t('Apps.towerStack.pause')" @click="togglePause">
+        <SkyButton glass icon-only rounded type="button" :aria-label="phone.t('Apps.towerStack.pause')" @click="togglePause">
           <Pause v-if="game.status === 'playing'" :size="17" fill="currentColor" />
           <Play v-else :size="17" fill="currentColor" />
-        </button>
+        </SkyButton>
       </div>
 
       <button
@@ -319,7 +326,8 @@ onBeforeUnmount(() => {
 .tower-header { height: 50px; display: flex; align-items: center; justify-content: space-between; }
 .tower-header span { display: block; color: #c1b8f1; font-size: 10px; font-weight: 850; letter-spacing: 1.1px; text-transform: uppercase; }
 .tower-header h1 { margin: 1px 0 0; font-size: 27px; line-height: 1; letter-spacing: -0.8px; }
-.tower-header button, .tower-toolbar button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #ffffff14; border-radius: 12px; color: #f2edff; background: #ffffff0d; }
+.tower-header button:not(.sky-button--glass), .tower-toolbar button:not(.sky-button--glass) { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #ffffff14; border-radius: 12px; color: #f2edff; background: #ffffff0d; }
+.tower-header .sky-button--glass, .tower-toolbar .sky-button--glass { color: #f2edff; }
 .tower-menu { height: calc(100% - 50px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; }
 .tower-menu__preview { position: relative; flex: 0 0 124px; width: 158px; height: 124px; }
 .tower-menu__preview i { position: absolute; right: 12px; bottom: calc((var(--preview-index) - 1) * 15px); left: 23px; height: 21px; border-radius: 6px; background: hsl(calc(var(--preview-index) * 49deg + 5deg) 82% 62%); box-shadow: inset 0 3px 0 #ffffff35, 0 5px 11px #08091c5c; transform: perspective(200px) rotateX(5deg); }
@@ -341,7 +349,7 @@ onBeforeUnmount(() => {
 .tower-toolbar div { height: 32px; display: grid; grid-template-rows: 10px 20px; align-content: center; justify-items: center; }
 .tower-toolbar span { color: #c9c2e9; font-size: 11px; font-weight: 850; line-height: 10px; letter-spacing: .35px; text-transform: uppercase; }
 .tower-toolbar strong { display: block; font-size: 19px; line-height: 20px; }
-.tower-toolbar button { width: 32px; height: 32px; border: 0; border-radius: 50%; box-shadow: none; }
+.tower-toolbar button { --sky-touch-target: 32px; width: 32px; height: 32px; }
 .tower-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: linear-gradient(#1d1b52, #433078 60%, #8e4c78); box-shadow: inset 0 0 35px #08091d80; touch-action: manipulation; }
 .tower-sky { position: absolute; inset: 0; pointer-events: none; }
 .tower-sky i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px #c5c2ff; opacity: .65; }
diff --git a/frontend/src/views/apps/WeazelNewsApp.vue b/frontend/src/views/apps/WeazelNewsApp.vue
index d07fdf7..88ed8dd 100644
--- a/frontend/src/views/apps/WeazelNewsApp.vue
+++ b/frontend/src/views/apps/WeazelNewsApp.vue
@@ -1193,7 +1193,7 @@ onBeforeUnmount(() => {
             <sky-button
               icon-only
               rounded
-              tonal
+              glass
               class="weazel-detail-gallery-control is-previous"
               :aria-label="t('accessibility.previousPhoto')"
               @click="showPreviousDetailImage"
@@ -1203,7 +1203,7 @@ onBeforeUnmount(() => {
             <sky-button
               icon-only
               rounded
-              tonal
+              glass
               class="weazel-detail-gallery-control is-next"
               :aria-label="t('accessibility.nextPhoto')"
               @click="showNextDetailImage"
@@ -2112,7 +2112,6 @@ onBeforeUnmount(() => {
   min-width: var(--sky-touch-target) !important;
   min-height: var(--sky-touch-target) !important;
   transform: translateY(-50%);
-  background: rgb(0 0 0 / 58%) !important;
   color: #fff !important;
 }