Reposition debug overlay panels to the bottom-right corner with vertical stacking to prevent interference with gameplay and HUD text.

DavidQ · DavidQ · commit c4b7afaa1b98 · 2026-04-16T15:43:05.000-04:00
PR: BUILD_PR_LEVEL_17_51_DEBUG_OVERLAY_POSITION_BOTTOM_RIGHT
diff --git a/docs/dev/CODEX_COMMANDS.md b/docs/dev/CODEX_COMMANDS.md
@@ -1,3 +1,3 @@
 MODEL: GPT-5.3-codex
 REASONING: high
-COMMAND: Apply TAB-based debug overlay cycling to all samples from 1707 onward using shared debug infrastructure, ensuring only one overlay is visible at a time, preserving gameplay, and package to <project folder>/tmp/BUILD_PR_LEVEL_17_48_APPLY_TAB_DEBUG_TO_SAMPLES_1707_PLUS.zip
+COMMAND: Move debug overlay panels to bottom-right corner with vertical stacking and spacing, apply across shared debug system for samples 1701+, preserve existing behavior, and package to <project folder>/tmp/BUILD_PR_LEVEL_17_51_DEBUG_OVERLAY_POSITION_BOTTOM_RIGHT.zip
diff --git a/docs/dev/COMMIT_COMMENT.txt b/docs/dev/COMMIT_COMMENT.txt
@@ -1,3 +1,3 @@
-Standardize debug overlay behavior across samples 1707+ by introducing TAB-based cycling to prevent overlay stacking and improve usability.
+Reposition debug overlay panels to the bottom-right corner with vertical stacking to prevent interference with gameplay and HUD text.
 
-PR: BUILD_PR_LEVEL_17_48_APPLY_TAB_DEBUG_TO_SAMPLES_1707_PLUS
+PR: BUILD_PR_LEVEL_17_51_DEBUG_OVERLAY_POSITION_BOTTOM_RIGHT
diff --git a/docs/pr/BUILD_PR_LEVEL_17_51_DEBUG_OVERLAY_POSITION_BOTTOM_RIGHT.md b/docs/pr/BUILD_PR_LEVEL_17_51_DEBUG_OVERLAY_POSITION_BOTTOM_RIGHT.md
@@ -0,0 +1,30 @@
+# BUILD
+
+## Instructions for Codex
+
+### Positioning
+- Anchor debug overlay container to:
+  bottom: 10px
+  right: 10px
+
+### Layout
+- Stack panels vertically upward
+- Add spacing between panels
+
+### Styling
+- Slight transparency (optional if already exists)
+- Ensure z-index remains above game but non-intrusive
+
+### Scope
+- All debug panels (shared system)
+- Applies to samples 1701+
+
+### Constraints
+- Do not change panel content
+- Do not break cycling logic
+- Use shared styling (no per-sample hacks)
+
+### Validation
+- Panels render bottom-right
+- No overlap with core HUD text
+- Works across all samples
diff --git a/docs/pr/PLAN_PR_LEVEL_17_51_DEBUG_OVERLAY_POSITION_BOTTOM_RIGHT.md b/docs/pr/PLAN_PR_LEVEL_17_51_DEBUG_OVERLAY_POSITION_BOTTOM_RIGHT.md
@@ -0,0 +1,12 @@
+# PLAN
+
+## Problem
+Debug overlays obstruct gameplay and HUD text.
+
+## Goal
+Relocate debug panels to bottom-right corner.
+
+## Behavior
+- Panels stack upward from bottom-right
+- Maintain readability
+- Avoid overlap with gameplay HUD
diff --git a/samples/phase-16/shared/threeDWireframe.js b/samples/phase-16/shared/threeDWireframe.js
@@ -4,6 +4,8 @@ David Quesenberry
 04/15/2026
 threeDWireframe.js
 */
+import { getNextBottomRightDebugPanelRect } from '/src/engine/debug/DebugOverlayLayout.js';
+
 const BOX_EDGES = [
   [0, 1], [1, 2], [2, 3], [3, 0],
   [4, 5], [5, 6], [6, 7], [7, 4],
@@ -260,7 +262,7 @@ export function drawDepthBackdrop(renderer, viewport, {
   }
 }
 
-export function drawPhase16DebugOverlay(renderer, viewport, viewState, lines = []) {
+export function drawPhase16DebugOverlay(renderer, viewport, viewState, lines = [], { stack = null } = {}) {
   if (!viewState?.debugOverlayEnabled) {
     return;
   }
@@ -272,14 +274,17 @@ export function drawPhase16DebugOverlay(renderer, viewport, viewState, lines = [
     ...lines,
   ];
 
-  const x = viewport.x + 12;
-  const y = viewport.y + 12;
   const width = Math.min(420, viewport.width - 24);
   const height = 30 + overlayLines.length * 18;
-  renderer.drawRect(x, y, width, height, 'rgba(15, 23, 42, 0.84)');
-  renderer.strokeRect(x, y, width, height, '#475569', 1);
+  const defaultX = viewport.x + 12;
+  const defaultY = viewport.y + 12;
+  const rect = stack
+    ? getNextBottomRightDebugPanelRect(stack, width, height)
+    : { x: defaultX, y: defaultY, width, height };
+  renderer.drawRect(rect.x, rect.y, rect.width, rect.height, 'rgba(15, 23, 42, 0.84)');
+  renderer.strokeRect(rect.x, rect.y, rect.width, rect.height, '#475569', 1);
   overlayLines.forEach((line, index) => {
-    renderer.drawText(line, x + 10, y + 22 + index * 18, {
+    renderer.drawText(line, rect.x + 10, rect.y + 22 + index * 18, {
       color: '#e2e8f0',
       font: '13px monospace',
     });
diff --git a/samples/phase-17/1701/RaycastDemoScene.js b/samples/phase-17/1701/RaycastDemoScene.js
@@ -6,7 +6,7 @@ RaycastDemoScene.js
 */
 import { Scene } from '/src/engine/scene/index.js';
 import { Theme, ThemeTokens } from '/src/engine/theme/index.js';
-import { drawFrame, drawPanel } from '/src/engine/debug/index.js';
+import { createBottomRightDebugPanelStack, drawFrame, drawStackedDebugPanel } from '/src/engine/debug/index.js';
 
 const theme = new Theme(ThemeTokens);
 
@@ -215,7 +215,8 @@ export default class DoomRaycastSpritesScene extends Scene {
     }
 
     this.drawSprites(renderer, columnWidth);
-    drawPanel(renderer, 620, 34, 300, 170, 'DOOM Runtime', [
+    const debugStack = createBottomRightDebugPanelStack(renderer);
+    drawStackedDebugPanel(renderer, debugStack, 300, 170, 'DOOM Runtime', [
       `Player: x=${this.player.x.toFixed(2)} y=${this.player.y.toFixed(2)}`,
       `Angle: ${this.player.angle.toFixed(2)} rad`,
       `Filled columns: ${this.lastFilledColumns}`,
diff --git a/samples/phase-17/1702/RaycastDemoScene.js b/samples/phase-17/1702/RaycastDemoScene.js
@@ -6,7 +6,7 @@ RaycastDemoScene.js
 */
 import { Scene } from '/src/engine/scene/index.js';
 import { Theme, ThemeTokens } from '/src/engine/theme/index.js';
-import { drawFrame, drawPanel } from '/src/engine/debug/index.js';
+import { createBottomRightDebugPanelStack, drawFrame, drawStackedDebugPanel } from '/src/engine/debug/index.js';
 
 const theme = new Theme(ThemeTokens);
 
@@ -166,7 +166,8 @@ export default class WolfGridRaycastScene extends Scene {
     }
 
     this.drawMiniMap(renderer);
-    drawPanel(renderer, 620, 34, 300, 170, 'Wolf Runtime', [
+    const debugStack = createBottomRightDebugPanelStack(renderer);
+    drawStackedDebugPanel(renderer, debugStack, 300, 170, 'Wolf Runtime', [
       `Player: x=${this.player.x.toFixed(2)} y=${this.player.y.toFixed(2)}`,
       `Angle: ${this.player.angle.toFixed(2)} rad`,
       `FOV: ${(this.fov * 180 / Math.PI).toFixed(0)} deg`,
diff --git a/samples/phase-17/1703/RaycastDemoScene.js b/samples/phase-17/1703/RaycastDemoScene.js
@@ -6,7 +6,7 @@ RaycastDemoScene.js
 */
 import { Scene } from '/src/engine/scene/index.js';
 import { Theme, ThemeTokens } from '/src/engine/theme/index.js';
-import { drawFrame, drawPanel } from '/src/engine/debug/index.js';
+import { createBottomRightDebugPanelStack, drawFrame, drawStackedDebugPanel } from '/src/engine/debug/index.js';
 
 const theme = new Theme(ThemeTokens);
 
@@ -171,7 +171,8 @@ export default class WolfOptimizedRaycastScene extends Scene {
       this.lastFilledColumns += 1;
     }
 
-    drawPanel(renderer, 620, 34, 300, 182, 'Wolf Runtime', [
+    const debugStack = createBottomRightDebugPanelStack(renderer);
+    drawStackedDebugPanel(renderer, debugStack, 300, 182, 'Wolf Runtime', [
       `Player: x=${this.player.x.toFixed(2)} y=${this.player.y.toFixed(2)}`,
       `Angle: ${this.player.angle.toFixed(2)} rad`,
       `Filled columns: ${this.lastFilledColumns}`,
diff --git a/samples/phase-17/1704/TextureMaterialDemoScene.js b/samples/phase-17/1704/TextureMaterialDemoScene.js
@@ -6,7 +6,7 @@ TextureMaterialDemoScene.js
 */
 import { Scene } from '/src/engine/scene/index.js';
 import { Theme, ThemeTokens } from '/src/engine/theme/index.js';
-import { drawFrame, drawPanel } from '/src/engine/debug/index.js';
+import { createBottomRightDebugPanelStack, drawFrame, drawStackedDebugPanel } from '/src/engine/debug/index.js';
 import {
   applyPhase16CameraMode,
   createPhase16ViewState,
@@ -165,7 +165,8 @@ export default class TextureMaterialDemoScene extends Scene {
       this.drawTexturedSurface(renderer, sorted[i], cameraState, projectionViewport);
     }
 
-    drawPanel(renderer, 620, 34, 300, 188, 'Material Runtime', [
+    const debugStack = createBottomRightDebugPanelStack(renderer);
+    drawStackedDebugPanel(renderer, debugStack, 300, 188, 'Material Runtime', [
       `Textured surfaces: ${this.surfaces.length}`,
       `Image draws: ${this.lastImageDraws}`,
       `Light pulse: ${Math.sin(this.lightPulse).toFixed(2)}`,
@@ -177,6 +178,6 @@ export default class TextureMaterialDemoScene extends Scene {
     drawPhase16DebugOverlay(renderer, viewport, this.viewState, [
       'Each panel uses a distinct image texture source',
       'Tint overlay simulates lightweight material response',
-    ]);
+    ], { stack: debugStack });
   }
 }
diff --git a/samples/phase-17/1705/ImageSkinnedCharacterDemoScene.js b/samples/phase-17/1705/ImageSkinnedCharacterDemoScene.js
@@ -6,7 +6,7 @@ ImageSkinnedCharacterDemoScene.js
 */
 import { Scene } from '/src/engine/scene/index.js';
 import { Theme, ThemeTokens } from '/src/engine/theme/index.js';
-import { drawFrame, drawPanel } from '/src/engine/debug/index.js';
+import { createBottomRightDebugPanelStack, drawFrame, drawStackedDebugPanel } from '/src/engine/debug/index.js';
 import {
   applyPhase16CameraMode,
   createPhase16ViewState,
@@ -169,7 +169,8 @@ export default class ImageSkinnedCharacterDemoScene extends Scene {
     this.lastImageDraws = 0;
     this.drawCharacter(renderer, cameraState, projectionViewport);
 
-    drawPanel(renderer, 620, 34, 300, 188, 'Character Runtime', [
+    const debugStack = createBottomRightDebugPanelStack(renderer);
+    drawStackedDebugPanel(renderer, debugStack, 300, 188, 'Character Runtime', [
       `Frame index: ${this.currentFrameIndex}`,
       `Image draws: ${this.lastImageDraws}`,
       `Character x: ${this.character.x.toFixed(2)}`,
@@ -181,6 +182,6 @@ export default class ImageSkinnedCharacterDemoScene extends Scene {
     drawPhase16DebugOverlay(renderer, viewport, this.viewState, [
       'Sprite sheet frame advances with motion cycle',
       'Character remains image-backed across all frames',
-    ]);
+    ], { stack: debugStack });
   }
 }
diff --git a/samples/phase-17/1706/VoxelWorldDemoScene.js b/samples/phase-17/1706/VoxelWorldDemoScene.js
@@ -6,7 +6,7 @@ VoxelWorldDemoScene.js
 */
 import { Scene } from '/src/engine/scene/index.js';
 import { Theme, ThemeTokens } from '/src/engine/theme/index.js';
-import { drawFrame, drawPanel } from '/src/engine/debug/index.js';
+import { createBottomRightDebugPanelStack, drawFrame, drawStackedDebugPanel } from '/src/engine/debug/index.js';
 
 const theme = new Theme(ThemeTokens);
 const WORLD_SIZE = 10;
@@ -130,7 +130,8 @@ export default class VoxelWorldDemoScene extends Scene {
       this.drawBlock(renderer, block.x, block.y, block.z, block.baseRgb);
     }
 
-    drawPanel(renderer, 620, 34, 300, 170, 'Voxel Runtime', [
+    const debugStack = createBottomRightDebugPanelStack(renderer);
+    drawStackedDebugPanel(renderer, debugStack, 300, 170, 'Voxel Runtime', [
       `World: ${WORLD_SIZE}x${WORLD_SIZE}`,
       `Camera: x=${this.camera.x.toFixed(2)} z=${this.camera.z.toFixed(2)} y=${this.camera.y.toFixed(2)}`,
       `Blocks drawn: ${blocks.length}`,
diff --git a/samples/phase-17/1707-1712.zip b/samples/phase-17/1707-1712.zip
diff --git a/samples/phase-17/1707/VoxelWorldDemoScene.js b/samples/phase-17/1707/VoxelWorldDemoScene.js
@@ -6,7 +6,7 @@ VoxelWorldDemoScene.js
 */
 import { Scene } from '/src/engine/scene/index.js';
 import { Theme, ThemeTokens } from '/src/engine/theme/index.js';
-import { drawFrame, drawPanel } from '/src/engine/debug/index.js';
+import { createBottomRightDebugPanelStack, drawFrame, drawStackedDebugPanel } from '/src/engine/debug/index.js';
 import {
   createTabDebugOverlayController,
   getTabDebugOverlayStatusLabel,
@@ -174,7 +174,8 @@ export default class ChunkStreamingVoxelScene extends Scene {
     }
 
     if (isTabDebugOverlayActive(this.tabDebugOverlays, OVERLAY_CHUNK_RUNTIME)) {
-      drawPanel(renderer, 620, 34, 300, 188, 'Chunk Runtime', [
+      const debugStack = createBottomRightDebugPanelStack(renderer);
+      drawStackedDebugPanel(renderer, debugStack, 300, 188, 'Chunk Runtime', [
         `World cells: ${WORLD_SIZE}x${WORLD_SIZE}`,
         `Camera: x=${this.camera.x.toFixed(2)} z=${this.camera.z.toFixed(2)}`,
         `Chunk radius: ${this.chunkRadius}`,
diff --git a/samples/phase-17/1708/RealGameplayMiniGameScene.js b/samples/phase-17/1708/RealGameplayMiniGameScene.js
@@ -9,10 +9,12 @@ import { Theme, ThemeTokens } from '/src/engine/theme/index.js';
 import {
   PANEL_3D_CAMERA,
   PANEL_3D_COLLISION,
+  createBottomRightDebugPanelStack,
   createStandard3dPanels,
   createStandard3dProviders,
   drawFrame,
   drawPanel,
+  drawStackedDebugPanel,
 } from '/src/engine/debug/index.js';
 import {
   applyPhase16CameraMode,
@@ -491,14 +493,14 @@ export default class RealGameplayMiniGameScene extends Scene {
     this.syncCamera();
   }
 
-  renderStandardDebugPanel(renderer, panelId, x, y, width, height, maxLines = 8) {
+  renderStandardDebugPanel(renderer, panelId, stack, width, height, maxLines = 8) {
     const panel = this.standardDebugPanels.find((candidate) => candidate.id === panelId);
     if (!panel || typeof panel.render !== 'function') {
       return;
     }
     const rendered = panel.render(panel, {});
     const lines = Array.isArray(rendered?.lines) ? rendered.lines.slice(0, maxLines) : [];
-    drawPanel(renderer, x, y, width, height, rendered?.title || panelId, lines);
+    drawStackedDebugPanel(renderer, stack, width, height, rendered?.title || panelId, lines);
   }
 
   render(renderer) {
@@ -680,8 +682,10 @@ export default class RealGameplayMiniGameScene extends Scene {
           : `Status: ${this.gameState}.`,
     ]);
 
+    const debugStack = createBottomRightDebugPanelStack(renderer);
+    this.debugOverlayStack = debugStack;
     if (this.isDebugOverlayActive(OVERLAY_RUNTIME)) {
-      drawPanel(renderer, 620, 414, 300, 120, 'Mini-Game Runtime', [
+      drawStackedDebugPanel(renderer, debugStack, 300, 120, 'Mini-Game Runtime', [
         `Entities: obstacles=${this.obstacles.length} sentries=${this.enemies.length}`,
         `Remaining cores: ${this.cores.filter((core) => !core.collected).length}`,
         `Player: x=${this.player.x.toFixed(2)} z=${this.player.z.toFixed(2)}`,
@@ -691,17 +695,17 @@ export default class RealGameplayMiniGameScene extends Scene {
     }
 
     if (this.isDebugOverlayActive(OVERLAY_CAMERA)) {
-      this.renderStandardDebugPanel(renderer, PANEL_3D_CAMERA, 620, 34, 300, 150, 7);
+      this.renderStandardDebugPanel(renderer, PANEL_3D_CAMERA, debugStack, 300, 150, 7);
     }
     if (this.isDebugOverlayActive(OVERLAY_COLLISION)) {
-      this.renderStandardDebugPanel(renderer, PANEL_3D_COLLISION, 620, 194, 300, 210, 9);
+      this.renderStandardDebugPanel(renderer, PANEL_3D_COLLISION, debugStack, 300, 210, 9);
     }
 
     if (this.isDebugOverlayActive(OVERLAY_PHASE16)) {
       drawPhase16DebugOverlay(renderer, viewport, this.viewState, [
         `Match state: ${this.gameState}`,
         'Standard 3D camera/collision debug panels rendered from provider snapshots',
-      ]);
+      ], { stack: debugStack });
     }
   }
 }
diff --git a/samples/phase-17/1709/MovementModelsLabScene.js b/samples/phase-17/1709/MovementModelsLabScene.js
@@ -6,7 +6,7 @@ MovementModelsLabScene.js
 */
 import { Scene } from '/src/engine/scene/index.js';
 import { Theme, ThemeTokens } from '/src/engine/theme/index.js';
-import { drawFrame, drawPanel } from '/src/engine/debug/index.js';
+import { createBottomRightDebugPanelStack, drawFrame, drawPanel, drawStackedDebugPanel } from '/src/engine/debug/index.js';
 import {
   createTabDebugOverlayController,
   getTabDebugOverlayStatusLabel,
@@ -333,8 +333,9 @@ export default class MovementModelsLabScene extends Scene {
     const runtimeX = hudX;
     const runtimeY = Math.max(12, hudY - runtimeHeight - runtimeGap);
 
+    const debugStack = createBottomRightDebugPanelStack(renderer);
     if (isTabDebugOverlayActive(this.tabDebugOverlays, OVERLAY_MOVEMENT_RUNTIME)) {
-      drawPanel(renderer, runtimeX, runtimeY, runtimeWidth, runtimeHeight, 'Movement Runtime', [
+      drawStackedDebugPanel(renderer, debugStack, runtimeWidth, runtimeHeight, 'Movement Runtime', [
         `Mode: ${formatMode(this.movementMode)}`,
         `Actor: x=${this.actor.x.toFixed(2)} z=${this.actor.z.toFixed(2)}`,
         `Velocity (weighted): x=${this.weightedVelocity.x.toFixed(2)} z=${this.weightedVelocity.z.toFixed(2)}`,
@@ -362,7 +363,7 @@ export default class MovementModelsLabScene extends Scene {
       drawPhase16DebugOverlay(renderer, viewport, this.viewState, [
         `Active movement model: ${formatMode(this.movementMode)}`,
         'Use 1/2/3 or M to compare control response in real time.',
-      ]);
+      ], { stack: debugStack });
     }
   }
 }
diff --git a/samples/phase-17/1710/RealGameplayMiniGameScene.js b/samples/phase-17/1710/RealGameplayMiniGameScene.js
@@ -9,10 +9,12 @@ import { Theme, ThemeTokens } from '/src/engine/theme/index.js';
 import {
   PANEL_3D_CAMERA,
   PANEL_3D_COLLISION,
+  createBottomRightDebugPanelStack,
   createStandard3dPanels,
   createStandard3dProviders,
   drawFrame,
   drawPanel,
+  drawStackedDebugPanel,
 } from '/src/engine/debug/index.js';
 import {
   applyPhase16CameraMode,
@@ -491,14 +493,14 @@ export default class RealGameplayMiniGameScene extends Scene {
     this.syncCamera();
   }
 
-  renderStandardDebugPanel(renderer, panelId, x, y, width, height, maxLines = 8) {
+  renderStandardDebugPanel(renderer, panelId, stack, width, height, maxLines = 8) {
     const panel = this.standardDebugPanels.find((candidate) => candidate.id === panelId);
     if (!panel || typeof panel.render !== 'function') {
       return;
     }
     const rendered = panel.render(panel, {});
     const lines = Array.isArray(rendered?.lines) ? rendered.lines.slice(0, maxLines) : [];
-    drawPanel(renderer, x, y, width, height, rendered?.title || panelId, lines);
+    drawStackedDebugPanel(renderer, stack, width, height, rendered?.title || panelId, lines);
   }
 
   render(renderer) {
@@ -680,8 +682,10 @@ export default class RealGameplayMiniGameScene extends Scene {
           : `Status: ${this.gameState}.`,
     ]);
 
+    const debugStack = createBottomRightDebugPanelStack(renderer);
+    this.debugOverlayStack = debugStack;
     if (this.isDebugOverlayActive(OVERLAY_RUNTIME)) {
-      drawPanel(renderer, 620, 414, 300, 120, 'Mini-Game Runtime', [
+      drawStackedDebugPanel(renderer, debugStack, 300, 120, 'Mini-Game Runtime', [
         `Entities: obstacles=${this.obstacles.length} sentries=${this.enemies.length}`,
         `Remaining cores: ${this.cores.filter((core) => !core.collected).length}`,
         `Player: x=${this.player.x.toFixed(2)} z=${this.player.z.toFixed(2)}`,
@@ -691,17 +695,17 @@ export default class RealGameplayMiniGameScene extends Scene {
     }
 
     if (this.isDebugOverlayActive(OVERLAY_CAMERA)) {
-      this.renderStandardDebugPanel(renderer, PANEL_3D_CAMERA, 620, 34, 300, 150, 7);
+      this.renderStandardDebugPanel(renderer, PANEL_3D_CAMERA, debugStack, 300, 150, 7);
     }
     if (this.isDebugOverlayActive(OVERLAY_COLLISION)) {
-      this.renderStandardDebugPanel(renderer, PANEL_3D_COLLISION, 620, 194, 300, 210, 9);
+      this.renderStandardDebugPanel(renderer, PANEL_3D_COLLISION, debugStack, 300, 210, 9);
     }
 
     if (this.isDebugOverlayActive(OVERLAY_PHASE16)) {
       drawPhase16DebugOverlay(renderer, viewport, this.viewState, [
         `Match state: ${this.gameState}`,
         'Standard 3D camera/collision debug panels rendered from provider snapshots',
-      ]);
+      ], { stack: debugStack });
     }
   }
 }
diff --git a/samples/phase-17/1711/MovementModelsLabScene.js b/samples/phase-17/1711/MovementModelsLabScene.js
diff --git a/samples/phase-17/1712/GameplayMetricsTelemetryScene.js b/samples/phase-17/1712/GameplayMetricsTelemetryScene.js
diff --git a/samples/phase-17/1713/FinalReferenceGameScene.js b/samples/phase-17/1713/FinalReferenceGameScene.js
diff --git a/src/engine/debug/DebugOverlayLayout.js b/src/engine/debug/DebugOverlayLayout.js
diff --git a/src/engine/debug/index.js b/src/engine/debug/index.js
diff --git a/tests/runtime/Phase17DebugOverlayBottomRightPosition.test.mjs b/tests/runtime/Phase17DebugOverlayBottomRightPosition.test.mjs
