/* ============================================================================ FOOD CUTTING SWORD — ADVANCED & MAINTAINABLE BASE STYLESHEET ============================================================================ ARCHITECTURE NOTES: - Uses CSS Custom Properties (Design Tokens) for dynamic theming. → To change the entire color scheme, edit the tokens in :root (1.3). → No need to hunt for hardcoded colors elsewhere. - Leverages modern :is() pseudo-class for DRY selector grouping. → If a component shares styles via :is(), adding a new screen to that group only requires adding its class name to the :is() list. - Implements a unified 3D Button System via CSS variables. → Every 3D button uses --shadow-3d-rest / hover / active. → To adjust the 3D depth globally, change those three variables. - Zero specificity hacks (no unnecessary body prefixes). MAINTENANCE QUICK-START: ├─ Change colors? → Edit :root tokens (Part 1.3) ├─ Change button depth? → Edit --shadow-3d-* variables (Part 1.3) ├─ Add a new sub-screen? → Add its class to the :is() groups in Part 5 ├─ Change font? → Edit --font-display / --font-body (Part 1.3) ├─ Adjust z-order? → Edit --z-* tokens (Part 1.3) └─ Tweak animations? → Edit keyframes (Part 1.4), or override duration/delay where the animation is applied. TABLE OF CONTENTS: 1. Core Foundation (Fonts, Reset, Tokens, Keyframes) 2. Global Components (Notifications, Stats, Buttons, Sliders, A11y) 3. Main Menu & Selections 4. In-Game Styles (Container, HUD, Effects) 5. Sub-Screens (Layout, Settings, Store, Inventory) 6. Detail Screens (Food, Blade, Sword Preview) 7. Modals & Overlays (Pause, Exits, Info, Win/Defeat) 8. Accessibility (Reduced Motion) ============================================================================ */ /* ============================================================================ PART 1 — CORE FOUNDATION Purpose: Establishes the ground rules — fonts, reset, design tokens, and all reusable keyframe animations. Maintenance: Changes here cascade everywhere. Edit with caution. ============================================================================ */ /* ─── 1.1 TYPOGRAPHY & FONTS ────────────────────────────────────────────── */ /* Custom display font used for headings and UI labels. To swap the font: 1. Replace the .ttf file in /assets/ 2. Update the src url below 3. Verify --font-display in :root still matches the family name */ @font-face { font-family: 'Luckiest Guy'; src: url('assets/Luckiest_Guy/LuckiestGuy-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; /* Prevents invisible text during font load */ } /* ─── 1.2 GLOBAL RESET & BASE ───────────────────────────────────────────── */ /* Universal box-sizing and tap highlight removal. NOTE: Do NOT add element-specific rules here — this is intentional blanket reset. Element-specific defaults go in their respective sections. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; /* Removes blue flash on mobile tap */ } /* Utility class to completely hide elements. The :not(#_) selector bumps specificity to (1,1,0) so this rule beats single-class display declarations elsewhere in the file without resorting to forced declarations. Apply via JS when toggling screens. */ .hidden:not(#_) { display: none; } /* Body: the root container for the entire game UI. - Flexbox centers the game container (useful if game doesn't fill viewport) - overflow:hidden prevents browser scrollbars during gameplay - background:#000 is the fallback before any background-image loads */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; padding: 0; margin: 0; background-color: #000; } /* ─── 1.3 DESIGN TOKENS (CSS VARIABLES) ─────────────────────────────────── */ /* ================================================================ SINGLE SOURCE OF TRUTH FOR ALL VISUAL VALUES ================================================================ Every color, size, shadow, and z-index used across the stylesheet is defined here. To theme the game differently (e.g., dark mode, seasonal theme), you only need to override these variables — no selector-level changes required. ORGANIZATION: ├─ Typography tokens → font families ├─ Gold accent tokens → primary accent color + RGB for alpha use ├─ Wood palette → brown/wood tones for panels & buttons ├─ Semantic colors → success/danger/info/purple/orange with │ dark/darker/depth variants for gradients ├─ Layout tokens → spacing, border-radius values ├─ 3D Button system → gradients + shadow states for all 3D buttons ├─ Texture tokens → reusable pattern overlays └─ Z-Index system → layered stacking order ================================================================ */ :root { /* ── Typography ── Change these to swap the entire font system. --font-display: Used for all headings, buttons, labels (bold/fun) --font-body: Used for paragraphs, small text, descriptions */ --font-display: 'Luckiest Guy', cursive; --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* ── Gold Accent Colors ── Primary accent. The RGB variant is used wherever you need rgba() with alpha (e.g., glows, shadows with transparency). If you change --gold, also update --gold-rgb to match. */ --gold: #f1c40f; --gold-light: #ffe066; /* Hover highlight, shine effects */ --gold-dark: #b8860b; /* Pressed state, borders */ --gold-rgb: 241, 196, 15; /* For rgba(var(--gold-rgb), 0.5) usage */ /* ── Wood / Brown Palette ── Numbered 9 (lightest) → 1 (darkest). Used for wooden panel backgrounds, button gradients, borders. Pattern: Higher number = lighter, more highlight. To make wood tones warmer/cooler, shift the hue in each step. */ --wood-9: #a86b32; --wood-8: #a66d33; --wood-7: #8b5a2b; /* Common border color for panels */ --wood-6: #7b4a23; --wood-5: #6b4423; /* Common button base */ --wood-4: #5c3a21; /* Common panel background */ --wood-3: #3a2210; --wood-2: #2a1508; --wood-1: #1a0f05; /* Darkest — used as 3D shadow bottom */ /* ── Semantic Colors ── Each has 4 variants for consistent gradient building: - base: Main color (e.g., #2ecc71) - dark: Gradient endpoint / pressed state - darker: Deep shadow bottom / border - depth: 3D extrusion shadow color To add a new semantic color, follow this 4-variant pattern. */ --success: #2ecc71; --success-dark: #1d4a17; --success-depth: #145a10; --danger: #e74c3c; --danger-dark: #c0392b; --danger-darker: #8b2020; --danger-depth: #3a1010; --info: #3498db; --info-dark: #2980b9; --info-darker: #1a5276; --info-depth: #0f3045; --purple: #8e44ad; --purple-dark: #6c3483; --purple-darker: #5b2c6f; --purple-depth: #4a235a; --orange: #ff6b2b; --orange-dark: #E65100; /* ── Layout & Spacing ── --header-total: Fixed height reserved for sub-screen top bars. All sub-screen content uses margin-top: var(--header-total) to sit below the header. If you change the header height, update ONLY this one variable. */ --header-total: 93px; --radius-sm: 10px; /* Small elements: sliders, progress bars */ --radius-md: 15px; /* Medium: buttons, cards, inputs */ --radius-lg: 25px; /* Large: modals, panels */ --radius-xl: 30px; /* Extra large: detail screen containers */ --radius-full: 50%; /* Circles: avatars, orbs, icon buttons */ /* ── Unified 3D Button System ────────────────────────────────── HOW IT WORKS: Every 3D button in the game shares the same shadow structure: - --shadow-3d-rest: Default state (raised) - --shadow-3d-hover: Hover state (lifted higher) - --shadow-3d-active: Pressed state (pushed down) The bottom shadow color defaults to --wood-1 (darkest brown). Individual buttons can override --wood-1 locally via: .my-btn { --wood-1: #1d3a17; } ← green shadow for success btn Gradient variables provide the face texture for each color variant. To add a new button color: 1. Create --grad-my-color-btn with the 4-stop wood-like pattern 2. Apply it: .my-btn { background: var(--grad-my-color-btn); } 3. Set local shadow color: .my-btn { --wood-1: ; } 4. Apply base shadows: box-shadow: var(--shadow-3d-rest); ──────────────────────────────────────────────────────────── */ --grad-wood-btn: linear-gradient(135deg, var(--wood-5) 0%, var(--wood-7) 15%, var(--wood-8) 30%, var(--wood-7) 45%, var(--wood-6) 60%, var(--wood-7) 75%, var(--wood-5) 90%, #5a3a1a 100%); --grad-success-btn: linear-gradient(135deg, #2d5a27 0%, #3d7a37 15%, #4a8a44 30%, #3d7a37 45%, #2d6a27 60%, #3d7a37 75%, #2d5a27 90%, var(--success-dark) 100%); --grad-danger-btn: linear-gradient(135deg, #6b1a1a 0%, #8b2a2a 15%, #a83a3a 30%, #8b2a2a 45%, #7b2a2a 60%, #8b2a2a 75%, #6b1a1a 90%, #5a1515 100%); --grad-info-btn: linear-gradient(135deg, var(--info-dark) 0%, var(--info) 50%, var(--info-dark) 100%); --grad-purple-btn: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple) 15%, #a569bd 30%, var(--purple) 45%, #7d3c98 60%, var(--purple) 75%, var(--purple-dark) 90%, var(--purple-darker) 100%); --grad-orange-btn: linear-gradient(135deg, #ba4a00 0%, #e67e22 15%, #f0932b 30%, #e67e22 45%, #d35400 60%, #e67e22 75%, #ba4a00 90%, #a04000 100%); /* Shadow presets — the "3D extrusion" effect. To change ALL button depths at once, edit these 3 variables. */ --shadow-3d-rest: inset 0 0 20px rgba(255,255,255,0.1), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.4), 0 6px 0 var(--wood-1), 0 10px 20px rgba(0,0,0,0.4); --shadow-3d-hover: inset 0 0 25px rgba(255,255,255,0.15), inset 0 2px 6px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.5), 0 9px 0 var(--wood-1), 0 15px 30px rgba(0,0,0,0.5); --shadow-3d-active: inset 0 0 15px rgba(0,0,0,0.3), 0 2px 0 var(--wood-1), 0 4px 8px rgba(0,0,0,0.4); /* Textures: subtle pattern overlay applied via ::before pseudo-elements. Gives buttons a wood-grain or brushed-metal feel. */ --texture-stripes: repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(0,0,0,0.04) 5px, rgba(0,0,0,0.04) 7px); /* ── Z-Index System ──────────────────────────────────────────── Controls the stacking order of all game layers. RULES: - Lower number = further back - Gaps between values leave room for new layers - Always use these variables, never raw z-index numbers To add a new layer, insert a variable at the appropriate gap. Current range: 1 (canvas) → 9999 (orientation notice) */ --z-canvas: 1; /* Game canvas — bottom layer */ --z-vignette: 2; /* Edge shadow overlay on canvas */ --z-hud: 5; /* In-game score/progress bar */ --z-score-popup: 5; /* Floating "+10" score text */ --z-pause: 15; /* Pause menu overlay */ --z-sub-screens: 25; /* Store, Inventory, Settings, Coin Shop */ --z-detail-screens: 30; /* Food Detail, Blade Detail, Sword Preview */ --z-modal: 50; /* Game Over, Level Complete panels */ --z-finish-msg: 80; /* "TIME'S UP!" flash message */ --z-toast: 1000; /* Top notification bar */ --z-critical: 9999; /* Orientation notice — must be on top of everything */ } /* ─── 1.4 KEYFRAME ANIMATIONS ───────────────────────────────────────────── */ /* ================================================================ 🔧 ALL REUSABLE ANIMATIONS IN ONE PLACE ================================================================ Each animation is defined here and referenced by name elsewhere. To modify an animation's feel: - Change timing: adjust the duration/delay WHERE IT'S APPLIED, not here. Keep keyframes as pure motion definitions. - Change the motion itself: edit the keyframe percentages below. - Disable all animations: see Part 8 (prefers-reduced-motion) GROUPING: ├─ Core Transitions: Simple fades, rotates ├─ Entrance: bounceIn, slideInUp, float ├─ UI Micro: pulse, score float, sparks ├─ Item/Orb: breathing, floating foods, star pop ├─ Finish/Popup: end-of-round messages ├─ Win Choreography: sequenced entrance for victory └─ Defeat Choreography: sequenced entrance for failure ================================================================ */ /* -- Core Transitions -- */ /* Generic rotation — used by orientation notice icon. Speed is set at the point of use, not here. */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(90deg); } } /* Simple opacity fade — used by overlays (pause, modals). Duration is set at the point of use. */ @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Fade for store/inventory tab content switching. Fast (0.3s) to feel snappy. */ @keyframes storeFade { from { opacity: 0; } to { opacity: 1; } } /* -- Entrance Animations -- */ /* Bouncy scale-in — used by modals, pause box. Overshoots to 1.05 then settles at 1.0 for a playful feel. To make it less bouncy, change 1.05→1.02 and 0.95→0.98. */ @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); opacity: 1; } 70% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } } /* Slide up from below — used by mode selection box. translateX(50px) controls how far below it starts. Reduce for subtler entrance. */ @keyframes slideInUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Gentle vertical float — used by the Play button on main menu. -15px is the float height. Reduce for subtler effect. */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } /* -- UI Micro-interactions -- */ /* Pulsing scale for countdown numbers (3, 2, 1). Scale range 1.0 → 1.1 controls pulse intensity. */ @keyframes countdown-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; } } /* Score popup float — the "+10" that appears when slicing food. -80px is how far it travels up. 1.3 is the initial pop scale — increase for more "pop". */ @keyframes scoreFloat { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { transform: translateY(-20px) scale(1.3); opacity: 1; } 100% { transform: translateY(-80px) scale(1); opacity: 0; } } /* Explosion core — the bright flash at the slice point. Scales from 0.3 to 1.5 and fades out. Duration ~0.6s. */ @keyframes explosionPulse { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } /* Slice flash line — the white slash that appears on cut. scaleX goes 0 → 1 → 1.2 for a "slash then fade" feel. */ @keyframes flash { 0% { transform: scaleX(0); opacity: 1; } 50% { transform: scaleX(1); opacity: 0.8; } 100% { transform: scaleX(1.2); opacity: 0; } } /* Spark particle — individual spark that flies out from a slice. Uses CSS custom property --spark-transform set by JS to define the flight direction. Each spark gets a unique transform. */ @keyframes spark-fly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: var(--spark-transform) scale(0); opacity: 0; } } /* Equipped item shine — sweeping light reflection on equipped buttons. Travels from -100% to 100% horizontally. 3s loop for subtle effect. */ @keyframes equippedShine { 0% { transform: translateX(-100%) rotate(45deg); } 50% { transform: translateX(100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } } /* -- Item / Orb Animations -- */ /* Hint icon float in sword size preview. Small 6px float + 5% scale pulse. Subtle attention drawer. */ @keyframes ssHintFloat { 0%, 100% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-6px) scale(1.05); opacity: 0.7; } } /* Star pop — win screen stars appearing. Rotates from -30deg and overshoots to +5deg before settling. */ @keyframes starPop { 0% { opacity: 0; transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.3) rotate(5deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } /* Floating food in detail screen. 8px float + 1.5deg rotation for organic feel. */ @keyframes floatFood { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } } /* Pulsing light glow behind blade detail preview. Scale 0.8→1.2, opacity 0.5→0.9. Creates ambient glow. */ @keyframes pulseLight { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; } } /* Orb breathing — blade color preview orbs in store. 5% scale + 20% brightness pulse. Makes orbs feel alive. */ @keyframes orbBreathe { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.2); } } /* -- Finish / Popup Messages -- */ /* "TIME'S UP!" pop-in at round end. Scales from 0 to 1 with overshoot (cubic-bezier handles the bounce). */ @keyframes finishPop { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } /* "TIME'S UP!" fade-out after display. Scales up to 1.5x while fading — feels like it's "blowing away". */ @keyframes finishFadeOut { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } } /* -- Win Screen Choreography ────────────────────────────────────── These animations are SEQUENCED via animation-delay to create a cinematic entrance. The timing flow is: 0.00s — Panel drops from above (winPanelDrop, 0.75s) 0.60s — Light sweep across panel (winLightSweep, 1s) 0.55s — Ribbon drops into place (winRibbonDrop, 0.5s) 0.70s — Stars appear (winContentReveal, 0.5s) 0.80s — Stats appear (winContentReveal, 0.5s) 0.95s — Action buttons appear (winContentReveal, 0.5s) 0.90s — Panel glow loop begins (winPanelGlow, 2.5s infinite) To adjust the overall pace, shift the delays proportionally. To add a new element to the sequence, insert it at an appropriate delay between existing steps. ─────────────────── */ /* Panel drops from -120vh with bounce landing. brightness(1.5)→(1) creates a "flash on impact" feel. */ @keyframes winPanelDrop { 0% { transform: translateY(-120vh) scale(0.7); opacity: 0; filter: brightness(1.5); } 45% { transform: translateY(25px) scale(1.06); opacity: 1; filter: brightness(1.15); } 60% { transform: translateY(-18px) scale(0.97); filter: brightness(1.05); } 75% { transform: translateY(10px) scale(1.02); } 87% { transform: translateY(-5px) scale(0.99); } 100% { transform: translateY(0) scale(1); opacity: 1; filter: brightness(1); } } /* Continuous glow pulse on win panel border. Gold box-shadow intensity oscillates between 0.12 and 0.3 alpha. */ @keyframes winPanelGlow { 0%, 100% { box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 0 0 6px var(--success-dark), 0 25px 60px rgba(0,0,0,0.9), 0 0 30px rgba(var(--gold-rgb), 0.12), 0 0 60px rgba(var(--gold-rgb), 0.06); } 50% { box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 0 0 6px var(--success-dark), 0 25px 60px rgba(0,0,0,0.9), 0 0 50px rgba(var(--gold-rgb), 0.3), 0 0 100px rgba(var(--gold-rgb), 0.15); } } /* Diagonal light sweep across the panel. A skewed white gradient moves from left:-100% to left:200%. */ @keyframes winLightSweep { 0% { left: -100%; } 100% { left: 200%; } } /* Ribbon drops from above with vertical scale stretch. scaleY(0.3)→(1) creates a "unfurling" effect. */ @keyframes winRibbonDrop { 0% { transform: translateY(-60px) scaleY(0.3); opacity: 0; } 100% { transform: translateY(0) scaleY(1); opacity: 1; } } /* Generic content reveal — fade + slide up. Used for stars, stats, and buttons with different delays. */ @keyframes winContentReveal { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* -- Defeat Screen Choreography ─────────────────────────────────── Sequenced entrance for the defeat/game-over screen: 0.00s — Screen shake (defeatScreenShake, 0.6s) 0.20s — Panel drops with slam effect (defeatPanelDrop, 0.65s) 0.55s — Ribbon slams down (defeatRibbonSlam, 0.4s) 0.65s — Reason text fades in (defeatFadeIn, 0.4s) 0.75s — Stats slide in (defeatContentReveal, 0.4s) 0.85s — Panel glow loop begins (defeatPanelGlow, 2.5s infinite) 0.90s — Action buttons appear (defeatContentReveal, 0.4s) The defeat feel is harsher than win: more shake, faster timing, desaturated entrance (saturate(0.2)→(1)). ───────────────────── */ /* Screen shake — violent offset oscillations that dampen. Amplitude decreases: 8px → 1px over 60% of the duration. To make it more/less violent, scale all pixel values proportionally. */ @keyframes defeatScreenShake { 0%, 60%, 100% { transform: translate(0, 0); } 6% { transform: translate(-8px, 4px) rotate(-0.5deg); } 12% { transform: translate(7px, -6px) rotate(0.5deg); } 18% { transform: translate(-5px, 5px) rotate(-0.3deg); } 24% { transform: translate(6px, -3px) rotate(0.3deg); } 30% { transform: translate(-4px, -4px) rotate(-0.2deg); } 36% { transform: translate(5px, 3px) rotate(0.2deg); } 42% { transform: translate(-3px, -2px) rotate(-0.1deg); } 48% { transform: translate(2px, 1px) rotate(0.1deg); } 54% { transform: translate(-1px, -1px); } } /* Panel slam — similar to winPanelDrop but with: - rotate(-1deg) initial tilt for "crooked landing" feel - brightness(2)→(1) for harsh flash - saturate(0.2)→(1) for desaturated-to-color reveal */ @keyframes defeatPanelDrop { 0% { transform: translateY(-120vh) scale(0.7) rotate(-1deg); opacity: 0; filter: brightness(2) saturate(0.2); } 40% { transform: translateY(30px) scale(1.08) rotate(0.5deg); opacity: 1; filter: brightness(1.2) saturate(0.8); } 55% { transform: translateY(-22px) scale(0.96) rotate(-0.2deg); } 70% { transform: translateY(12px) scale(1.03) rotate(0.1deg); } 82% { transform: translateY(-6px) scale(0.99); } 92% { transform: translateY(3px) scale(1.005); } 100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; filter: brightness(1) saturate(1); } } /* Red glow pulse on defeat panel border. Same structure as winPanelGlow but with red (danger) colors. */ @keyframes defeatPanelGlow { 0%, 100% { box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 0 0 6px #5a1515, 0 25px 60px rgba(0,0,0,0.9), 0 0 25px rgba(231,76,60,0.08), 0 0 50px rgba(231,76,60,0.04); } 50% { box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 0 0 6px #5a1515, 0 25px 60px rgba(0,0,0,0.9), 0 0 45px rgba(231,76,60,0.22), 0 0 90px rgba(231,76,60,0.1); } } /* Ribbon slam — faster version of winRibbonDrop. Shorter distance (-50px vs -60px) for a more aggressive feel. */ @keyframes defeatRibbonSlam { 0% { transform: translateY(-50px) scaleY(0.3); opacity: 0; } 100% { transform: translateY(0) scaleY(1); opacity: 1; } } /* Simple fade + scale for defeat reason text. Less movement than winContentReveal — defeat feels heavier. */ @keyframes defeatFadeIn { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } } /* Content reveal — identical to winContentReveal but named separately for semantic clarity in the choreography. */ @keyframes defeatContentReveal { 0% { transform: translateY(25px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* ============================================================================ PART 2 — GLOBAL COMPONENTS & UTILITIES Purpose: Reusable UI pieces that appear across multiple screens. Maintenance: Changes here affect all screens using these components. ============================================================================ */ /* ─── 2.1 ORIENTATION NOTICE & TOAST NOTIFICATIONS ──────────────────────── */ /* Orientation notice: shown when device is in landscape on mobile. Uses fixed inset:0 to cover everything. .show class is toggled by JS based on media query/orientation event. To change the message, edit the HTML — styles only control layout. */ .orientation-notice { position: fixed; inset: 0; background-color: #000; color: white; display: none; /* Hidden by default, shown via .show */ flex-direction: column; justify-content: center; align-items: center; z-index: var(--z-critical); /* Must be above everything */ text-align: center; padding: 20px; } .orientation-notice.show { display: flex; } /* Rotating phone icon — uses the generic rotate keyframe. 2s infinite linear = constant smooth rotation. */ .orientation-icon { font-size: 80px; margin-bottom: 20px; animation: rotate 2s infinite linear; } .orientation-text { font-size: 24px; font-weight: bold; margin-bottom: 10px; } .orientation-subtext { font-size: 18px; opacity: 0.8; } /* Toast notification: slides down from top of screen. Position: fixed so it stays visible during screen transitions. Transform: translate(-50%, -120%) hides it above viewport. .show class slides it to translate(-50%, 0) — fully visible. To change the toast style, edit background/border/shadow below. To change slide speed, edit the transition duration. */ #notification { position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%); /* Hidden above screen */ background: linear-gradient(135deg, var(--wood-4), var(--wood-3)); color: #fff; padding: 12px 25px; border-radius: 0 0 var(--radius-md) var(--radius-md); /* Flat top, rounded bottom */ font-size: 18px; font-weight: bold; z-index: var(--z-toast); box-shadow: 0 4px 15px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.8); border: 2px solid var(--wood-7); border-top: none; /* Merges visually with screen top edge */ transition: transform 0.4s ease-in-out; /* Controls slide speed */ text-align: center; } #notification.show { transform: translate(-50%, 0); /* Slides into view */ } /* ─── 2.2 PLAYER STATS BAR ──────────────────────────────────────────────── */ /* Displays player coins (and potentially other stats). Reused in: Main Menu, Store, Coin Shop. LAYOUT: - Flex row with gap between stat items - Dark semi-transparent background for readability on any background - Orange border for visual accent To add a new stat (e.g., level), add a new .stat-item inside the .player-stats container in HTML. Styles are automatic. */ .player-stats { display: flex; gap: clamp(10px, 2vw, 15px); background: linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6)); padding: clamp(8px, 1.5vw, 10px) clamp(22px, 3vw, 28px) clamp(8px, 1.5vw, 10px) clamp(12px, 2vw, 18px); border-radius: 30px; box-shadow: 0 0 0 2px var(--orange), 0 5px 15px rgba(0,0,0,0.5); z-index: var(--z-detail-screens); align-items: center; position: relative; } /* Positioning variant: top-left on main menu. Other screens override this with their own position rules. */ .main-menu-stats { position: absolute; top: 20px; left: 20px; } /* Individual stat item (icon + value pair). Gold color with black text-shadow for contrast on dark backgrounds. To change stat text color, edit color/text-shadow here. */ .stat-item { display: flex; align-items: center; gap: clamp(6px, 1vw, 10px); color: var(--gold); font-size: clamp(16px, 3vw, 24px); font-weight: bold; text-shadow: 2px 2px 4px #000; } /* Stat icon (coin image, etc.) Responsive sizing via clamp. Filter adds drop shadow for depth. */ .stat-icon { width: clamp(20px, 4vw, 30px); height: clamp(20px, 4vw, 30px); filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8)); } /* "+" button to add coins (debug/purchase shortcut). Positioned at the top-right corner of the stats bar, protruding out. Transform: translate(45%, -45%) pushes it diagonal to the corner. To remove this button, delete the HTML element — no CSS cleanup needed. */ .add-coins-btn { position: absolute; right: 0; top: 0; transform: translate(45%, -45%); /* Protrudes from corner */ width: clamp(24px, 4.5vw, 32px); height: clamp(24px, 4.5vw, 32px); border-radius: var(--radius-full); border: 2px solid #fff; background: linear-gradient(180deg, #FFA726, #F57C00); color: #fff; font-size: clamp(16px, 3vw, 22px); font-weight: bold; cursor: pointer; display: flex; justify-content: center; align-items: center; line-height: 1; box-shadow: 0 3px 0 var(--orange-dark), 0 5px 10px rgba(0,0,0,0.5), inset 0 1px 3px rgba(255,255,255,0.4); transition: transform 0.2s ease, box-shadow 0.2s ease; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); z-index: 8; } .add-coins-btn:hover { transform: translate(45%, -45%) scale(1.1); /* Keep the translate, add scale */ box-shadow: 0 5px 0 var(--orange-dark), 0 8px 15px rgba(0,0,0,0.6); } .add-coins-btn:active { transform: translate(45%, -45%) scale(0.95); box-shadow: 0 1px 0 var(--orange-dark); } /* ─── 2.3 NAVIGATION & ACTION BUTTONS ───────────────────────────────────── */ /* Top-right navigation buttons (settings, store, inventory icons). Flex row-reverse so the first HTML element appears rightmost. Gap controls spacing between nav buttons. */ .top-nav { position: absolute; top: 20px; right: 20px; display: flex; gap: 15px; flex-direction: row-reverse; /* First child = rightmost */ z-index: var(--z-detail-screens); } /* Generic nav button (settings gear, store icon, etc.) Sized responsively. Hover adds rotation + drop shadow for playfulness. */ .nav-btn { width: clamp(40px, 8vw, 70px); height: clamp(40px, 8vw, 70px); cursor: pointer; transition: transform 0.2s ease, filter 0.2s; } .nav-btn:hover { transform: scale(1.15) rotate(-5deg); filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5)); } /* Back arrow button — base styles for all screens. Positioned top-left. Hover nudges left for "going back" feel. Each screen section below overrides position/size as needed. */ .back-arrow-btn { position: absolute; top: clamp(10px, 2vw, 20px); left: 15px; width: clamp(40px, 7vw, 70px); height: clamp(40px, 7vw, 70px); cursor: pointer; transition: transform 0.2s ease; z-index: var(--z-detail-screens); } .back-arrow-btn:hover { transform: scale(1.1) translateX(-5px); /* Nudges left on hover */ } /* ── Back Button: Sub-Screen Variant ────────────────────────────── Used by: Store, Inventory, Settings, Coin Shop These screens have a header bar, so the button is vertically centered on that bar (top: 45px + translateY(-50%)). Smaller than the default to fit the header proportionally. TO ADD A NEW SUB-SCREEN: add its class to this :is() selector. */ :is(.inventory-screen, .settings-screen, .store-screen, .coin-shop-screen) .back-arrow-btn { top: 45px; transform: translateY(-50%); /* Vertically centered on header */ margin-top: 0; width: clamp(35px, 6vw, 55px); height: clamp(35px, 6vw, 55px); } /* Hover must re-include the translateY to avoid jumping */ :is(.inventory-screen, .settings-screen, .store-screen, .coin-shop-screen) .back-arrow-btn:hover { transform: translateY(-50%) scale(1.1); } /* ── Back Button: Detail Screen Variant ─────────────────────────── Used by: Food Detail, Blade Detail These screens have a full-bleed container with no header bar, so the button sits in the top-left corner of that container. Offset by the container's padding (32px - button half-size). TO ADD A NEW DETAIL SCREEN: add its class to this :is() selector. */ :is(.food-detail-screen, .blade-detail-screen) .back-arrow-btn { top: calc(32px - clamp(25px, 3.5vw, 35px)); left: calc(32px - clamp(25px, 3.5vw, 35px)); width: clamp(50px, 7vw, 70px); height: clamp(50px, 7vw, 70px); transform: none; /* No centering offset needed */ z-index: var(--z-modal); /* Above detail content */ } :is(.food-detail-screen, .blade-detail-screen) .back-arrow-btn:hover { transform: scale(1.1); } /* In-game settings button (gear icon in top-right during gameplay). Has a .disabled state for when settings shouldn't be accessible (e.g., during countdown or game-over animation). */ .game-settings-btn { width: clamp(40px, 7vw, 60px); height: clamp(40px, 7vw, 60px); cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; pointer-events: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); } .game-settings-btn:hover { transform: scale(1.1) rotate(10deg); } /* Disabled state: faded and non-interactive. JS toggles this class during restricted game states. */ .game-settings-btn.disabled { opacity: 0.3; pointer-events: none; cursor: default; } /* ─── Unified Confirm/Action Button System ───────────────────────────────── */ /* ================================================================ 🔧 CONFIRM BUTTONS (Yes/No in dialogs) ================================================================ Uses the 3D Button System from Part 1.3: - .confirm-btn: base styles (size, font, border-radius, texture) - .confirm-yes: red/danger variant (for "Exit", "Confirm Delete") - .confirm-no: green/success variant (for "Cancel", "Stay") Each variant overrides --wood-1 locally to change the 3D shadow color to match its semantic meaning. To add a new confirm button color: 1. Create a new class: .confirm-maybe 2. Set background: var(--grad-info-btn) (or a custom gradient) 3. Set --wood-1: 4. Set box-shadow: var(--shadow-3d-rest) The hover/active states are inherited automatically via the base .confirm-btn rules. ================================================================ */ .confirm-btn { position: relative; padding: 12px 25px; font-size: clamp(1rem, 2.5vw, 1.4rem); font-family: var(--font-display); border-radius: var(--radius-md); border: none; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; /* Contains the texture overlay */ min-width: 100px; color: #fff; text-shadow: 2px 2px 0 #000; } /* Wood-grain texture overlay — applied to ALL confirm buttons. Uses ::before so button text remains clickable. */ .confirm-btn::before { content: ''; position: absolute; inset: 0; background: var(--texture-stripes); pointer-events: none; /* Clicks pass through to the button */ border-radius: var(--radius-md); } /* Red "Yes / Confirm" button. --wood-1: #3a1010 makes the 3D shadow dark red instead of brown. */ .confirm-yes { background: var(--grad-danger-btn); --wood-1: #3a1010; box-shadow: var(--shadow-3d-rest); } .confirm-yes:hover { transform: translateY(-2px); box-shadow: var(--shadow-3d-hover); } .confirm-yes:active { transform: translateY(3px); box-shadow: var(--shadow-3d-active); } /* Green "No / Cancel" button. --wood-1: #1d3a17 makes the 3D shadow dark green. */ .confirm-no { background: var(--grad-success-btn); --wood-1: #1d3a17; box-shadow: var(--shadow-3d-rest); } .confirm-no:hover { transform: translateY(-2px); box-shadow: var(--shadow-3d-hover); } .confirm-no:active { transform: translateY(3px); box-shadow: var(--shadow-3d-active); } /* ─── 2.4 SLIDERS & CONTROLS ────────────────────────────────────────────── */ /* ================================================================ 🔧 CUSTOM SLIDER SYSTEM ================================================================ Both .slider (settings screen) and .ss-preview-slider (sword size preview) share the same visual style via this :is() group. HOW THE TRACK WORKS: The track is a CSS-only gradient that creates a "filled" effect: - Left cap: 14px gold (rounded end) - Right cap: 14px dark (rounded end) - Center: gold from 0% to --value, then dark to 100% - --value is set inline by JS: style="--value: 75%" This avoids needing a separate ::after pseudo-element for the fill. TO CHANGE SLIDER COLORS: Replace var(--gold) with your desired color in the background property below (appears 3 times: left cap, center fill, thumb). ================================================================ */ :is(.slider, .ss-preview-slider) { -webkit-appearance: none; appearance: none; height: 12px; outline: none; border-radius: var(--radius-sm); border: none; --value: 50%; background: linear-gradient( to right, var(--gold) 0%, var(--gold) var(--value), rgba(0,0,0,0.65) var(--value), rgba(0,0,0,0.65) 100% ); box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.05); } /* Width variants — settings slider is narrower, preview slider is full-width */ .slider { width: clamp(120px, 40vw, 250px); } .ss-preview-slider { width: 100%; margin: 10px 0; } /* Transparent track — the visual track is the background above, so the native track must be invisible. Both WebKit and Firefox. */ :is(.slider, .ss-preview-slider)::-webkit-slider-runnable-track { -webkit-appearance: none; height: 12px; background: transparent; border-radius: var(--radius-sm); border: none; } :is(.slider, .ss-preview-slider)::-moz-range-track { height: 12px; background: transparent; border-radius: var(--radius-sm); border: none; } /* Slider thumb — the draggable circle. Radial gradient creates a 3D sphere effect (highlight at 35% 35%). White border + gold glow shadow for visibility on any background. margin-top: -8px on WebKit vertically centers it on the 12px track. */ :is(.slider, .ss-preview-slider)::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; background: radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold) 50%, var(--gold-dark)); cursor: pointer; border-radius: var(--radius-full); border: 3px solid #fff; box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.8), 0 3px 6px rgba(0,0,0,0.7); margin-top: -8px; /* Center on track: (28-12)/2 = 8 */ transition: transform 0.15s ease, box-shadow 0.15s ease; } /* Firefox version — no margin-top needed, Firefox handles centering */ :is(.slider, .ss-preview-slider)::-moz-range-thumb { width: 28px; height: 28px; background: radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold) 50%, var(--gold-dark)); cursor: pointer; border-radius: var(--radius-full); border: 3px solid #fff; box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.8), 0 3px 6px rgba(0,0,0,0.7); transition: transform 0.15s ease, box-shadow 0.15s ease; } /* Thumb hover — grows slightly + stronger glow */ :is(.slider, .ss-preview-slider)::-webkit-slider-thumb:hover, :is(.slider, .ss-preview-slider)::-moz-range-thumb:hover { transform: scale(1.15); box-shadow: 0 0 18px rgba(var(--gold-rgb), 1), 0 5px 10px rgba(0,0,0,0.8); } /* Thumb active — shrinks slightly for "pressed" feel */ :is(.slider, .ss-preview-slider)::-webkit-slider-thumb:active, :is(.slider, .ss-preview-slider)::-moz-range-thumb:active { transform: scale(0.95); } /* ─── 2.5 ACCESSIBILITY (FOCUS STATES) ──────────────────────────────────── */ /* ================================================================ 🔧 KEYBOARD NAVIGATION FOCUS RING ================================================================ All interactive elements get a gold outline when focused via keyboard (Tab key). This only shows for :focus-visible, which means mouse clicks do NOT trigger it — only keyboard navigation. .locked items are excluded because they're not interactive. TO CHANGE FOCUS STYLE: Edit outline color (var(--gold)), width (3px), or offset (3px). To disable: set outline: none (not recommended for accessibility). ================================================================ */ :is(.pause-btn, .confirm-btn, .buy-btn, .mode-btn, .start-action-btn, .add-coins-btn, .nav-btn, .back-arrow-btn, .store-tab-btn, .inv-top-tab-btn, .sword-size-preview-btn, .difficulty-btn, .variant-btn, .blade-sidebar-card):focus-visible:not(.locked) { outline: 3px solid var(--gold); outline-offset: 3px; } /* ============================================================================ PART 3 — MAIN MENU & SELECTIONS Purpose: Title screen, mode selection, difficulty selection. Maintenance: These screens are the player's first impression. ============================================================================ */ /* ── Shared Full-Screen Layout ──────────────────────────────────── Main menu, mode selection, and difficulty selection all share this full-viewport layout with centered content. TO ADD A NEW SELECTION SCREEN: 1. Add its class to this :is() group 2. It will automatically get: absolute positioning, centered flex, dark background, text color, padding 3. Override z-index and background-image separately if needed */ :is(.main-menu, .mode-selection-screen, .difficulty-screen) { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; padding: 20px; background-size: cover; background-position: center; background-color: #1a0f05; /* Fallback before image loads */ } /* Main menu: lowest z among selection screens (others overlay it) */ .main-menu { z-index: 20; background-image: url('assets/backgrounds/Background 1.jpg'); } /* Mode & Difficulty: above main menu, below sub-screens */ :is(.mode-selection-screen, .difficulty-screen) { z-index: var(--z-sub-screens); background-image: url('assets/backgrounds/background 4.jpg'); } /* Dark vignette overlay on mode/difficulty screens. Radial gradient: transparent center → dark edges. Helps white text readability over busy backgrounds. */ :is(.mode-selection-screen, .difficulty-screen)::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 100%); z-index: 1; pointer-events: none; /* Clicks pass through to buttons below */ } /* Game title — the big "FOOD CUTTING SWORD" text. White stroke effect via 8 text-shadows (N, NE, E, SE, S, SW, W, NW). To change title color, edit color property. To change stroke color, edit the #fff values in text-shadow. To remove stroke, use -webkit-text-stroke instead (see countdown for example). */ .main-menu-title { font-family: var(--font-display); font-size: clamp(3rem, 8.5vw, 6rem); text-transform: uppercase; letter-spacing: 4px; margin-bottom: 8vh; /* Spacing below title */ color: #FF8C00; /* Orange — main title color */ text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff, 5px 5px 10px rgba(0,0,0,0.5); } /* Color variants within the title text. Applied via tags in HTML for per-word coloring. */ .main-menu-title .green-slice { color: #006400; /* Dark green for "SLICE" */ } .main-menu-title .master-text { color: #000000; /* Black for "MASTER" — creates contrast with white stroke */ } /* Play button — the big circular button on the main menu. Floats gently via the float keyframe (3s loop). Large drop shadow for depth. Hover scales up + rotates slightly. The actual button image comes from the src in HTML. */ .play-btn { width: clamp(80px, 15vw, 150px); height: clamp(80px, 15vw, 150px); cursor: pointer; transition: transform 0.3s ease, filter 0.3s ease; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.6)); animation: float 3s ease-in-out infinite; /* Gentle floating */ } .play-btn:hover { transform: scale(1.2) rotate(5deg); /* Grows + tilts on hover */ filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8)); /* Deeper shadow */ } /* ─── 3.2 MODE SELECTION ────────────────────────────────────────────────── */ /* Container for mode buttons (Classic, Zen, etc.) slideInUp animation: slides up from 50px below. Width: 90% max 600px — keeps buttons readable on all screens. */ .mode-box { display: flex; flex-direction: column; gap: clamp(20px, 4.5vw, 45px); /* Vertical gap between mode buttons */ z-index: 2; /* Above the vignette overlay */ width: 90%; max-width: 600px; animation: slideInUp 0.5s ease-out forwards; } /* Individual mode button. Uses a background image for the button shape/texture. The text, color, and shadow are all CSS — the image provides the wooden board shape. To change button image: update background-image url. To change button text style: edit font-size, color, text-shadow. The background-size: 100% 100% stretches the image to fill. */ .mode-btn { position: relative; width: 100%; height: clamp(95px, 15vw, 140px); font-size: clamp(28px, 5vw, 45px); font-family: var(--font-display); color: #fff; letter-spacing: 3px; text-shadow: 2px 2px 0px rgba(0,0,0,0.8), -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; background-color: transparent; background-image: url('assets/backgrounds/Button 1.png'); background-size: 100% 100%; /* Stretch to fill button dimensions */ background-repeat: no-repeat; background-position: center; border: none; box-shadow: none; /* Shadow comes from the background image */ cursor: pointer; display: flex; justify-content: center; align-items: center; transition: transform 0.15s ease, filter 0.15s ease; } .mode-btn:hover { transform: scale(1.05); filter: brightness(1.1); /* Slightly lighter on hover */ } .mode-btn:active { transform: scale(0.95); /* Shrinks on press */ filter: brightness(0.9); /* Slightly darker on press */ } /* Level badge — the rotated ribbon showing "LVL 5" etc. Absolutely positioned top-right, rotated 25deg for a "stamped on" look. Gold gradient background with white border. To hide: set display:none or remove the HTML element. To change position: adjust top/right and rotation angle. */ .level-badge { position: absolute; top: -5px; right: -45px; /* Protrudes beyond button edge */ transform: rotate(25deg); background: linear-gradient(135deg, var(--gold), #f39c12); color: #fff; padding: 6px 22px; border-radius: 20px; font-size: clamp(16px, 3.5vw, 24px); font-family: var(--font-display); border: 3px solid #fff; box-shadow: 0 5px 0 #d35400, 0 8px 15px rgba(0,0,0,0.5); /* 3D + drop shadow */ z-index: 8; letter-spacing: 2px; white-space: nowrap; text-shadow: 2px 2px 0 #000; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */ } /* Badge follows parent button hover with slight extra rotation */ .mode-btn:hover .level-badge { transform: rotate(30deg) scale(1.05); } /* ─── 3.3 DIFFICULTY SELECTION ──────────────────────────────────────────── */ /* Difficulty buttons use a "carousel" layout where 3 buttons are visible: left (previous), center (current/selected), right (next). Each button has a position class (.pos-left, .pos-center, .pos-right) that controls its transform (offset, scale, rotation, brightness). JS swaps these classes when the user clicks left/right arrows. LAYOUT: - .difficulty-box: the viewport-constrained container - .difficulty-btn: each button (absolute positioned) - .pos-*: transform presets for carousel positions - .difficulty-name: the text label inside each button */ /* Container: sized to fit one button with room for the side buttons to peek in from the edges. */ .difficulty-box { position: relative; width: 100%; height: clamp(300px, 40vw, 450px); display: flex; justify-content: center; align-items: center; margin-top: 20px; z-index: 2; } /* Base difficulty button — uses background images for the card shape. Each difficulty has its own background-image class below. */ .difficulty-btn { position: absolute; width: clamp(280px, 38vw, 400px); height: clamp(300px, 40vw, 420px); background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth carousel slide */ } /* Background image per difficulty level. To change a card's appearance, swap the image file. */ .easy-btn { background-image: url('assets/backgrounds/button 2.png'); } .medium-btn { background-image: url('assets/backgrounds/button 3.png'); } .hard-btn { background-image: url('assets/backgrounds/button 4.png'); } /* ── Carousel Position Presets ──────────────────────────────────── LEFT: Off to the left, smaller, rotated counter-clockwise, dimmed CENTER: Front and center, larger, full brightness RIGHT: Off to the right, smaller, rotated clockwise, dimmed JS moves buttons between these positions. To adjust the carousel spread, change translateX percentages. To adjust size difference, change scale values. To adjust tilt, change rotate degrees. */ .pos-left { transform: translateX(-75%) translateY(-30px) scale(0.85) rotate(-5deg); z-index: 1; filter: brightness(0.7) drop-shadow(0 10px 15px rgba(0,0,0,0.5)); } .pos-center { transform: translateX(0) translateY(20px) scale(1.1); /* Slightly larger */ z-index: 5; /* Above side buttons */ filter: brightness(1) drop-shadow(0 15px 25px rgba(0,0,0,0.8)); } .pos-right { transform: translateX(75%) translateY(-30px) scale(0.85) rotate(5deg); z-index: 1; filter: brightness(0.7) drop-shadow(0 10px 15px rgba(0,0,0,0.5)); } /* Hover states: side buttons "wake up" — straighten, brighten, rise */ .pos-left:hover { transform: translateX(-75%) translateY(-40px) scale(0.9) rotate(0deg); /* Straightens */ filter: brightness(1.1) drop-shadow(0 15px 20px rgba(0,0,0,0.6)); z-index: 8; /* Above center on hover */ } .pos-center:hover { transform: translateX(0) translateY(10px) scale(1.15); filter: brightness(1.1) drop-shadow(0 20px 30px rgba(0,0,0,0.9)); } .pos-right:hover { transform: translateX(75%) translateY(-40px) scale(0.9) rotate(0deg); /* Straightens */ filter: brightness(1.1) drop-shadow(0 15px 20px rgba(0,0,0,0.6)); z-index: 8; } /* Difficulty name text inside each card. Heavy text-shadow for readability over the background image. margin-top: -25px offsets it upward to visually center on the card. */ .difficulty-name { font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 4.5rem); color: #fff; text-shadow: 5px 5px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 0 8px 20px rgba(0,0,0,0.8); text-transform: uppercase; letter-spacing: 5px; position: relative; z-index: 5; margin-top: -25px; } /* "START" action button — appears on difficulty and mode screens. Positioned bottom-right, wood gradient, 3D shadow via box-shadow. ::before adds the wood-grain texture overlay. */ .start-action-btn { position: absolute; bottom: clamp(20px, 4vw, 40px); right: clamp(20px, 4vw, 40px); padding: clamp(15px, 3vw, 20px) clamp(40px, 8vw, 60px); font-size: clamp(20px, 4vw, 32px); font-family: var(--font-display); color: #fff; background: linear-gradient(180deg, var(--wood-8) 0%, var(--wood-7) 50%, #6b4423 100%); border: 3px solid #fff; border-radius: var(--radius-md); cursor: pointer; box-shadow: 0 15px 25px rgba(0,0,0,0.7), inset 0 -5px 0 rgba(0,0,0,0.6), inset 0 2px 5px rgba(255,255,255,0.4); text-shadow: 2px 2px 0 #000; transition: transform 0.2s ease, box-shadow 0.2s ease; z-index: var(--z-detail-screens); letter-spacing: 2px; } /* Wood-grain texture overlay for the start button */ .start-action-btn::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(0,0,0,0.08) 5px, rgba(0,0,0,0.08) 8px); pointer-events: none; } .start-action-btn:hover { transform: translateY(-5px); /* Lifts on hover */ } .start-action-btn:active { transform: translateY(2px); /* Pushes down on click */ box-shadow: 0 5px 10px rgba(0,0,0,0.6), inset 0 -2px 0 rgba(0,0,0,0.6), inset 0 2px 5px rgba(0,0,0,0.3); } /* ============================================================================ PART 4 — IN-GAME STYLES Purpose: The actual gameplay screen — canvas, HUD, effects. Maintenance: Performance-critical section. Avoid heavy selectors. ============================================================================ */ /* Game container: full viewport, holds the canvas and all HUD overlays. Background image is the game arena. Canvas sits on top. overflow:hidden prevents any game elements from causing scrollbars. */ .game-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; background-color: #0a0500; /* Dark fallback before image loads */ background-image: url('assets/backgrounds/background 2.jpg'); background-size: cover; background-position: center; } /* The HTML5 Canvas where the game renders. width/height 100% fills the container. cursor:crosshair gives the "sword" feel. position:relative + z-index:1 establishes the base layer. */ #gameCanvas { width: 100%; height: 100%; cursor: crosshair; display: block; z-index: 1; position: relative; } /* Vignette overlay — darkens the edges of the game area. Normally has no box-shadow (invisible). .has-overlay class (added by JS during pause/modals) ensures the vignette doesn't interfere with overlay backgrounds. To add a permanent vignette, set a box-shadow here. */ .game-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: none; transition: box-shadow 0.3s ease; } .has-overlay .game-vignette { box-shadow: none; } /* ─── 4.2 IN-GAME HUD & STATS ───────────────────────────────────────────── */ /* Top bar container: holds score on the left, settings on the right. pointer-events:none allows clicks to pass through to the canvas. Individual interactive children re-enable pointer-events. */ .game-ui { position: absolute; top: 0; left: 0; right: 0; padding: clamp(10px, 2vw, 20px); display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; /* Pass-through to canvas */ z-index: 5; } /* Right side: settings button wrapper. Also pointer-events:none — the button itself re-enables it. */ .game-ui-right { display: flex; align-items: center; pointer-events: none; } /* Left side: score bar + any other left-aligned HUD elements. pointer-events:auto so the score bar itself can be interactive (e.g., if you add a click-to-expand stats feature). */ .game-ui-left { display: flex; align-items: center; gap: clamp(10px, 2vw, 20px); pointer-events: auto; } /* Modern score bar — the pill-shaped score + progress display. Dark semi-transparent background with subtle border. transform:translateY(5px) visually aligns it with the settings button. */ .modern-stats-bar { display: flex; align-items: center; background: rgba(0,0,0,0.65); border: 2px solid rgba(255,255,255,0.1); border-radius: 40px; padding: 6px 20px 6px 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.7), inset 0 0 15px rgba(255,255,255,0.03); gap: clamp(8px, 1.5vw, 15px); transform: translateY(5px); } /* Red circle with the target score number. Gradient: pink to red-orange for a "danger/urgent" feel. Inner white inset shadow creates a glossy sphere effect. */ .target-icon-circle { width: clamp(35px, 6vw, 45px); height: clamp(35px, 6vw, 45px); background: linear-gradient(135deg, #ff416c, #ff4b2b); border-radius: var(--radius-full); display: flex; justify-content: center; align-items: center; box-shadow: 0 0 15px rgba(255, 75, 43, 0.6), inset 0 0 8px rgba(255,255,255,0.4); border: 2px solid #fff; flex-shrink: 0; /* Prevents shrinking in flex layout */ font-family: var(--font-display); color: #fff; font-size: clamp(18px, 3.5vw, 24px); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; } /* Wrapper for current score + progress bar. Column layout: score number on top, progress bar below. */ .modern-score-wrapper { display: flex; flex-direction: column; gap: 4px; min-width: 70px; /* Prevents layout shift as score digits change */ justify-content: center; } /* Current score number. Gold color with glow text-shadow for visibility on dark background. letter-spacing:2px prevents digit overlap at large sizes. */ .modern-score-text { font-family: var(--font-display); display: flex; align-items: center; justify-content: center; } .modern-score-text span { font-size: clamp(24px, 4.5vw, 32px); color: var(--gold); text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5), 2px 2px 0 #000; line-height: 1; letter-spacing: 2px; } /* Progress bar track — dark background with inset shadow. overflow:hidden ensures the fill stays within rounded corners. */ .modern-progress-bg { width: 100%; height: clamp(6px, 1.5vw, 8px); background: rgba(0,0,0,0.8); border-radius: var(--radius-sm); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,1); } /* Progress bar fill — animated via JS setting width: X%. Cyan gradient for contrast against the gold score. cubic-bezier with overshoot makes the fill "bounce" slightly when reaching a new value — feels more alive than linear. TO CHANGE PROGRESS COLOR: edit the gradient below. */ .modern-progress-fill { height: 100%; width: 0%; /* JS sets this to (currentScore / targetScore * 100)% */ background: linear-gradient(90deg, #00f2fe, #4facfe); border-radius: var(--radius-sm); box-shadow: 0 0 10px rgba(79, 172, 254, 0.8); transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* ─── 4.3 IN-GAME COUNTDOWN ─────────────────────────────────────────────── */ /* The big "3", "2", "1" numbers before the round starts. Hidden by default, shown via .active class toggled by JS. Centered with translate(-50%, -50%). TEXT STROKE STRATEGY: Uses 8 directional text-shadows as fallback, with @supports (-webkit-text-stroke) providing cleaner strokes on browsers that support it (mostly WebKit/Blink). TO CHANGE COUNTDOWN COLOR: edit color property. TO CHANGE COUNTDOWN SIZE: edit font-size clamp values. */ .in-game-countdown { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: clamp(8rem, 20vw, 12rem); color: #ffffff; text-shadow: -4px -4px 0 black, 0 -4px 0 black, 4px -4px 0 black, -4px 0 0 black, 4px 0 0 black, -4px 4px 0 black, 0 4px 0 black, 4px 4px 0 black, 5px 5px 10px rgba(0,0,0,0.5); z-index: 60; /* Above canvas but below pause menu */ animation: countdown-pulse 1s infinite; /* Pulsing scale */ display: none; /* Hidden until .active is added */ } /* Cleaner text-stroke for browsers that support it. Replaces the 8-shadow hack with a single -webkit-text-stroke. */ @supports (-webkit-text-stroke: 4px black) { .in-game-countdown { text-shadow: 5px 5px 10px rgba(0,0,0,0.5); -webkit-text-stroke: 4px black; } } .in-game-countdown.active { display: block; } /* ─── 4.4 VISUAL EFFECTS ────────────────────────────────────────────────── */ /* All in-game visual effects are absolutely positioned elements created dynamically by JS, animated via CSS, then removed. PATTERN: 1. JS creates the element at the slice position 2. JS sets position (left/top) and any custom properties 3. CSS animation runs automatically 4. JS removes the element after animation ends (via animationend event) TO ADJUST AN EFFECT: - Change motion: edit the corresponding @keyframes in Part 1.4 - Change size: edit width/height here - Change color: edit background/color here - Change duration: edit animation-duration here (not in @keyframes) */ /* Score popup — the "+10" floating text. Position and content (the number) are set by JS. Gold color with black stroke for readability on any background. */ .score-popup { position: absolute; font-size: clamp(30px, 6vw, 48px); font-weight: bold; color: var(--gold); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; animation: scoreFloat 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; font-family: var(--font-display); z-index: 5; } /* Slice impact container — holds the flash line and spark particles. 200x200px area centered on the slice point. JS positions this at the slice coordinates. */ .slice-impact { position: absolute; pointer-events: none; width: 200px; height: 200px; transform: translate(-50%, -50%); /* Center on the point */ z-index: 8; } /* Flash line — the white slash that appears along the cut trajectory. Thin (4px) white gradient line that scales out and fades. JS sets the rotation to match the swipe angle. */ .slice-flash { position: absolute; top: 50%; left: 0; width: 100%; height: 4px; background: linear-gradient(to right, transparent, white, transparent); border-radius: 2px; animation: flash 0.3s ease-out forwards; transform-origin: center; box-shadow: 0 0 10px white; } /* Individual spark particle — small white dot that flies outward. JS sets --spark-transform to a random direction (e.g., "translate(50px, -30px)"). The spark-fly keyframe reads this variable for unique trajectories. */ .slice-spark { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: white; border-radius: var(--radius-full); animation: spark-fly 0.5s ease-out forwards; box-shadow: 0 0 5px white; } /* Explosion core — the bright flash at the center of a slice. Radial gradient: white center → orange → red → transparent. Creates a "fireball" effect that expands and fades. */ .explosion-core-realistic { position: absolute; width: 120px; height: 120px; border-radius: var(--radius-full); background: radial-gradient(circle, #fff 0%, #ffaa00 30%, #ff4500 60%, transparent 70%); transform: translate(-50%, -50%); pointer-events: none; z-index: 8; animation: explosionPulse 0.6s ease-out forwards; } /* "TIME'S UP!" message — the big red text that appears at round end. Centered on screen with a dark backing panel (::before). Starts at scale(0), animated to scale(1) via .pop-in class, then to scale(1.5)+fade via .fade-out class. TO CHANGE THE MESSAGE TEXT: edit the HTML/JS, not CSS. TO CHANGE THE COLOR: edit color property (currently #ff3333). TO CHANGE THE BACKING PANEL: edit ::before styles. */ .finish-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); /* Hidden until animated */ font-family: var(--font-display); font-size: clamp(3rem, 12vw, 7rem); color: #ff3333; text-shadow: -3px -3px 0 #330000, 0 -3px 0 #330000, 3px -3px 0 #330000, -3px 0 0 #330000, 3px 0 0 #330000, -3px 3px 0 #330000, 0 3px 0 #330000, 3px 3px 0 #330000, 4px 4px 0 #000, 0 0 20px rgba(255, 0, 0, 0.8); z-index: var(--z-finish-msg); pointer-events: none; white-space: nowrap; letter-spacing: 6px; } /* Cleaner text-stroke version for supporting browsers */ @supports (-webkit-text-stroke: 3px #330000) { .finish-msg { text-shadow: 4px 4px 0 #000, 0 0 20px rgba(255, 0, 0, 0.8); -webkit-text-stroke: 3px #330000; } } /* Dark backing panel behind the "TIME'S UP!" text. Wider than the text (100% + 80px) for padding. Dark background with red inner glow. z-index:-1 places it behind the text but above the game. */ .finish-msg::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 80px); height: 45%; background: rgba(0,0,0,0.9); border-radius: 20px; box-shadow: 0 15px 30px rgba(0,0,0,0.9), inset 0 0 20px rgba(255, 0, 0, 0.3); z-index: -1; } /* JS toggles these classes to trigger the animations */ .finish-msg.pop-in { animation: finishPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .finish-msg.fade-out { animation: finishFadeOut 0.5s forwards; } /* ============================================================================ PART 5 — SUB-SCREENS (STORE, INVENTORY, SETTINGS) Purpose: Persistent screens accessible from the main menu. Maintenance: These share a common layout system — see the :is() groups. ============================================================================ */ /* ── Shared Sub-Screen Layout ──────────────────────────────────── All 4 sub-screens share: full-viewport, same background, centered content starting below the header bar. TO ADD A NEW SUB-SCREEN (e.g., "Achievements"): 1. Add .achievements-screen to all :is() groups in this section 2. Create an .achievements-container with margin-top: var(--header-total) 3. Add a title rule if needed (or it inherits from the :is(>h1) rule) 4. Add back button positioning (it auto-inherits if in the :is() group) ──────────────────────────────────────────────────────────────── */ :is(.settings-screen, .store-screen, .coin-shop-screen, .inventory-screen) { position: absolute; inset: 0; background-color: #1a0f05; background-image: url('assets/backgrounds/background 4.jpg'); background-size: cover; background-position: center; z-index: var(--z-sub-screens); display: flex; justify-content: center; align-items: flex-start; /* Content starts from top, not center */ padding: clamp(10px, 2vw, 20px); overflow: hidden; /* Scroll is handled by inner content areas */ } /* Hide scrollbar on the screen level — inner containers handle scrolling */ :is(.settings-screen, .store-screen, .coin-shop-screen, .inventory-screen)::-webkit-scrollbar { display: none; } /* Decorative gold line below the header area. Purely visual — separates the title bar from content. pointer-events:none so it doesn't block clicks. */ :is(.settings-screen, .store-screen, .coin-shop-screen, .inventory-screen)::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 90px; background-color: transparent; z-index: 26; border-bottom: 3px solid var(--gold); box-shadow: 0 4px 10px rgba(0,0,0,0.5); pointer-events: none; } /* Sub-screen titles — positioned at the top center of the header bar. Applies to the direct

child of any sub-screen. Gold color, display font, centered via absolute+transform. */ :is(.settings-screen, .store-screen, .coin-shop-screen, .inventory-screen) > h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.8rem); color: var(--gold); text-shadow: 0 0 15px rgba(0,0,0,0.5), 4px 4px 2px #000; text-align: center; white-space: nowrap; margin: 0; position: absolute; top: 45px; left: 50%; transform: translate(-50%, -50%); z-index: 28; letter-spacing: 3px; } /* Player stats bar position in Store and Coin Shop. Sits in the header bar, right side, vertically centered. Smaller padding than the main menu version to fit the header. */ :is(.store-screen, .coin-shop-screen) .player-stats { position: absolute; top: 45px; transform: translateY(-50%); right: 20px; margin: 0; padding: clamp(5px, 1vw, 8px) clamp(15px, 2vw, 20px) clamp(5px, 1vw, 8px) clamp(10px, 1.5vw, 15px); } /* ── Content Area Spacing ──────────────────────────────────────── All sub-screen content containers use margin-top: var(--header-total) to sit below the gold header line. height: calc(100% - var(--header-total)) fills the remaining space. If you change --header-total in :root, ALL sub-screens automatically adjust. No individual edits needed. */ :is(.settings-box, .coin-shop-container, .store-layout) { margin-top: var(--header-total); height: calc(100% - var(--header-total)); padding-top: 0; width: 100%; } .settings-box { padding-top: 25px; /* Extra top padding inside settings */ } .store-tabs { margin-top: 25px; } .store-grid { padding-top: 25px; } #coinShopGrid { padding-top: 25px; } /* ─── 5.2 SETTINGS SCREEN ───────────────────────────────────────────────── */ /* Settings content container — scrollable column of setting items. Horizontal padding creates margin from screen edges. gap between items for breathing room. */ .settings-box { width: 100%; max-width: 100%; background: none; border: none; box-shadow: none; padding-bottom: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 4vw, 35px); overflow-y: auto; /* Scrollable if many settings */ padding-left: clamp(30px, 5vw, 80px); padding-right: clamp(30px, 5vw, 80px); } /* Individual setting row — label on the left, control on the right. Dark semi-transparent background with wood border. flex-wrap:nowrap prevents the label and slider from wrapping to separate lines on narrow screens. TO ADD A NEW SETTING: add a new .setting-item div in HTML with a .setting-label span and the control element. Styles are automatic. */ .setting-item { display: flex; justify-content: space-between; align-items: center; width: 75%; max-width: 750px; background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5)); padding: clamp(12px, 2vw, 18px) clamp(20px, 3vw, 30px); border-radius: var(--radius-md); margin-bottom: clamp(15px, 3vw, 20px); box-shadow: 0 0 0 2px var(--wood-7); flex-wrap: nowrap; gap: clamp(8px, 1.5vw, 15px); min-width: 0; /* Allows flex items to shrink below content size */ } /* Setting label text — gold, display font. white-space:nowrap prevents label from breaking across lines. flex-shrink:0 prevents the label from shrinking when slider needs space. */ .setting-label { font-family: var(--font-display); font-size: clamp(20px, 4vw, 32px); color: var(--gold); text-shadow: 2px 2px 4px rgba(0,0,0,0.5); margin-right: clamp(10px, 2vw, 20px); white-space: nowrap; flex-shrink: 0; padding-right: clamp(8px, 1.5vw, 15px); } /* Sword size control: slider + value display + preview button. flex-shrink:0 keeps the whole control group together. */ .sword-size-control { display: flex; align-items: center; gap: clamp(6px, 1.2vw, 12px); flex-shrink: 0; } /* Current sword size value display (e.g., "100%"). Fixed min-width prevents layout shift when value changes. Dark background makes it look like a readout display. */ .sword-size-value { font-family: var(--font-display); font-size: clamp(16px, 3vw, 22px); color: var(--gold); text-shadow: 2px 2px 4px rgba(0,0,0,0.5); min-width: 85px; width: 85px; flex-shrink: 0; text-align: center; background: rgba(0,0,0,0.4); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(var(--gold-rgb), 0.3); } /* "PREVIEW" button — opens the sword size preview screen. Uses the info/blue color variant. 3D shadow: --info-darker as the bottom extrusion color. Small text size to not overwhelm the slider. */ .sword-size-preview-btn { padding: clamp(6px, 1.2vw, 10px) clamp(8px, 1.5vw, 18px); font-family: var(--font-display); font-size: clamp(10px, 1.5vw, 13px); color: #fff; background: var(--grad-info-btn); border: 2px solid #fff; border-radius: var(--radius-md); cursor: pointer; text-shadow: 1px 1px 0 #000; box-shadow: 0 3px 0 var(--info-darker), 0 5px 10px rgba(0,0,0,0.4); transition: transform 0.2s ease, box-shadow 0.2s ease; letter-spacing: 1px; white-space: nowrap; } .sword-size-preview-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--info-darker), 0 8px 15px rgba(0,0,0,0.5); } .sword-size-preview-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--info-darker); } /* ─── 5.3 STORE SYSTEM & ITEM CARDS ─────────────────────────────────────── */ /* Store layout: sidebar (tabs) on the left, content grid on the right. Flexbox row layout. gap:30px between sidebar and grid. max-width:1500px prevents excessive stretching on ultrawide screens. */ .store-layout { display: flex; flex-direction: row; align-items: flex-start; width: 98%; max-width: 1500px; padding-bottom: 20px; gap: 30px; } /* Store tab sidebar — vertical list of category buttons. min-width:280px ensures tabs don't get too narrow. Right border creates visual separation from the content grid. flex-shrink:0 prevents sidebar from shrinking when grid needs space. */ .store-tabs { display: flex; flex-direction: column; gap: 20px; min-width: 280px; margin-bottom: 0; padding-right: 30px; padding-left: 12px; border-right: 3px solid rgba(255,255,255,0.4); border-radius: 2px; } /* Individual store tab button. Wood gradient background, white border, gold text. .active state: brighter background, gold border, slight scale up. TO ADD A NEW STORE TAB: add a new .store-tab-btn in HTML. JS handles the click to show/hide content sections. The active state styling is automatic. */ .store-tab-btn { width: 100%; height: clamp(60px, 8vw, 80px); display: flex; justify-content: center; align-items: center; font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 28px); color: var(--gold); background: linear-gradient(135deg, var(--wood-4), var(--wood-3)); border: 3px solid #fff; border-radius: var(--radius-md); cursor: pointer; text-shadow: 2px 2px 0 #000; box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.5); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease; text-transform: uppercase; letter-spacing: 2px; margin: 0; transform: none; } .store-tab-btn:hover { box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 5px 20px rgba(0,0,0,0.7); color: #fff; } /* Active tab: visually distinct from inactive tabs. Brighter wood, gold border, 5% scale up. */ .store-tab-btn.active { background: linear-gradient(135deg, var(--wood-7), #5a3a1a); border-color: var(--gold); box-shadow: inset 0 0 15px rgba(255,255,255,0.3), 0 5px 20px rgba(0,0,0,0.6); color: #fff; transform: scale(1.05); } /* Content area: holds the grid of items for the active tab. overflow:visible on this wrapper, actual scroll on .store-grid inside. */ .store-content-area { width: 100%; flex-grow: 1; height: 100%; overflow: visible; display: flex; flex-direction: column; } /* Item grid: 4 columns, responsive gap. overflow-y:auto for scrolling when there are many items. align-content:flex-start keeps items at the top when the grid has extra vertical space. */ .store-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(15px, 2vw, 25px); width: 100%; height: 100%; padding: 10px 80px 80px 10px; /* Extra bottom padding for scroll */ overflow-y: auto; overflow-x: hidden; align-content: flex-start; } /* Store section — wraps the grid for a single tab's content. Fades in when switching tabs (storeFade animation). */ .store-section { width: 100%; height: 100%; display: flex; flex-direction: column; animation: storeFade 0.3s ease forwards; } /* Custom scrollbar for the store grid. Orange thumb matches the game's accent color. To hide scrollbar entirely: set display:none on both track and thumb. */ .store-grid::-webkit-scrollbar { width: 10px; display: block; } .store-grid::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); border-radius: var(--radius-sm); margin: 30px 0 20px; } .store-grid::-webkit-scrollbar-thumb { background: var(--orange); border-radius: var(--radius-sm); border: 1px solid var(--wood-2); } /* ── Store Layout Overflow Fixes ───────────────────────────────── These rules prevent horizontal overflow caused by the grid or its children exceeding the available width. IMPORTANT: Do not remove these unless you're restructuring the store layout to use a different approach. */ .store-screen { overflow: hidden; } .store-layout { overflow: hidden; } .store-content-area { overflow: hidden; max-width: 100%; min-width: 0; /* Allows flex child to shrink below content size */ flex: 1 1 0%; width: auto; padding: 0; margin: 0; } .store-grid { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ padding: 10px 15px 80px 15px; } .store-grid .store-item { max-width: 100%; min-width: 0; } .store-tabs { flex-shrink: 0; } /* ── Store Item Card ───────────────────────────────────────────── The main building block of the store grid. LAYOUT: - Square card (aspect-ratio: 1/1) - Wood gradient background with inset shadow for depth - 4px wood-7 border (gold on hover) - Content: image → name → price/quantity → action button - margin:0 auto centers cards that don't fill the grid cell TO CHANGE CARD SHAPE: edit aspect-ratio or remove it. TO CHANGE CARD SIZE: adjust grid columns in .store-grid. TO CHANGE CARD STYLE: edit background, border, box-shadow. */ .store-item { background: linear-gradient(135deg, var(--wood-4), var(--wood-3)); border-radius: 20px; padding: clamp(10px, 2vw, 15px); display: flex; flex-direction: column; align-items: center; gap: clamp(5px, 1vh, 8px); box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 0 4px var(--wood-7), 0 10px 20px rgba(0,0,0,0.6); position: relative; width: 100%; max-width: 220px; margin: 0 auto; aspect-ratio: 1 / 1; /* Square cards */ transition: transform 0.3s, box-shadow 0.3s; } .store-item:hover { transform: translateY(-5px); /* Lifts on hover */ box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 0 4px var(--gold), 0 15px 25px rgba(0,0,0,0.7); /* Gold border on hover */ } /* Item image — food/blade/power-up image. Responsive sizing, centered, with drop shadow for depth. object-fit:contain prevents distortion. */ .item-image { width: 100%; max-width: clamp(60px, 12vw, 90px); height: auto; aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5)); } /* ── Blade Color Preview (Orb) ─────────────────────────────────── Used instead of .item-image for blade items in the store. A colored circle that represents the blade's trail color. LAYERS (bottom to top): 1. Background color (set via inline style by JS) 2. ::before — inner shadow for 3D sphere illusion 3. ::after — highlight reflection (top-left bright spot) Locked items don't get the breathing animation. TO CHANGE ORB SIZE: edit width/height clamp values. TO CHANGE ORB BORDER: edit the border property. */ .blade-color-preview { width: clamp(65px, 12vw, 85px); height: clamp(65px, 12vw, 85px); position: relative; border-radius: var(--radius-full); border: 2px solid rgba(255,255,255,0.4); margin-bottom: 15px; z-index: 1; overflow: hidden; } /* Inner shadow — creates the 3D sphere look. Top-left light source simulation via inset shadows. */ .blade-color-preview::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-full); box-shadow: inset -10px -10px 20px rgba(0,0,0,0.6), inset 5px 5px 15px rgba(255,255,255,0.4); z-index: 2; pointer-events: none; } /* Highlight reflection — bright spot at top-left. Elliptical gradient that fades to transparent. Sells the "glass orb" illusion. */ .blade-color-preview::after { content: ''; position: absolute; top: 5%; left: 18%; width: 64%; height: 35%; border-radius: var(--radius-full); background: linear-gradient(to bottom, rgba(255,255,255,0.85), transparent); z-index: 3; pointer-events: none; } /* Breathing animation on unlocked blade orbs only. Locked items skip this for a "dead" feel. */ .store-item:not(.locked-item) .blade-color-preview { animation: orbBreathe 3s infinite ease-in-out; } /* Item name — gold, display font, single line with ellipsis overflow. white-space:nowrap + text-overflow:ellipsis + overflow:hidden prevents long names from breaking the card layout. */ .item-name { font-family: var(--font-display); font-weight: normal; font-size: clamp(14px, 2.5vw, 18px); color: var(--gold); text-shadow: 2px 2px 0 #000; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; line-height: 1.2; letter-spacing: 1px; margin-top: 15px; } /* Info icon — the small "?" circle at top-right of item cards. Clicking opens an info modal about the item. Italic serif "i" for a classic "information" look. */ .info-icon { position: absolute; top: clamp(5px, 1vw, 8px); right: clamp(5px, 1vw, 8px); z-index: 2; width: clamp(16px, 3vw, 20px); height: clamp(16px, 3vw, 20px); background-color: #f0f0f0; color: #000; border-radius: var(--radius-full); border: clamp(1px, 0.2vw, 2px) solid #333; text-align: center; line-height: clamp(14px, 2.8vw, 18px); font-weight: bold; font-family: 'Georgia', serif; cursor: pointer; transition: transform 0.2s ease; font-style: italic; font-size: clamp(10px, 2vw, 14px); box-shadow: 1px 1px 3px rgba(0,0,0,0.5); } .info-icon:hover { transform: scale(1.15); } /* Item quantity display (e.g., "x5" for consumables). Shows how many the player owns. */ .item-quantity { display: flex; align-items: center; gap: clamp(5px, 1vw, 6px); font-weight: bold; font-size: clamp(12px, 2.2vw, 16px); color: #ddd; text-shadow: 1px 1px 2px #000; } /* Small info icon next to quantity — explains what the item does. */ .quantity-info-icon { display: inline-block; width: clamp(12px, 2.2vw, 16px); height: clamp(12px, 2.2vw, 16px); background-color: var(--gold); color: #000; border-radius: var(--radius-full); text-align: center; line-height: clamp(12px, 2.2vw, 16px); font-size: clamp(8px, 1.6vw, 12px); font-weight: bold; cursor: pointer; transition: transform 0.2s; box-shadow: 1px 1px 2px rgba(0,0,0,0.5); } .quantity-info-icon:hover { transform: scale(1.1); } /* Item price — coin icon + number. Displayed for items the player doesn't own yet. */ .item-price { display: flex; align-items: center; gap: clamp(5px, 1vw, 6px); font-size: clamp(16px, 2.8vw, 20px); font-weight: bold; color: #fff; text-shadow: 1px 1px 2px #000; } /* ── Store Action Buttons ──────────────────────────────────────── Uses the 3D Button System. .buy-btn: Base styles for ALL store action buttons .equip-blade-btn: Blue "Equip" variant for blades .equipped-btn: Gold "Equipped" (active/disabled state) .item-unlocked-text: Green text for "Unlocked" power-ups .locked-store-btn: Purple "Locked" (needs prerequisite) To add a new button variant: 1. Create a new class with background + --wood-1 + box-shadow 2. Keep the base .buy-btn for shared styles ================================================================ */ /* Base buy/action button — sits at the bottom of each store card. Uses the 3D system: rest/hover/active shadows. margin-top:auto pushes it to the bottom of the flex column card. ::before adds the wood-grain texture. */ .buy-btn { position: relative; padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 20px); font-size: clamp(14px, 2.5vw, 18px); font-weight: bold; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: var(--radius-md); border: none; background: var(--grad-success-btn); /* Green = "Buy" */ --wood-1: #1d3a17; /* Green 3D shadow */ box-shadow: var(--shadow-3d-rest); color: #fff; font-family: var(--font-body); width: 85%; margin-top: auto; /* Push to card bottom */ display: flex; justify-content: center; align-items: center; text-align: center; text-shadow: 1px 1px 0 #000; overflow: hidden; } /* Wood-grain texture overlay */ .buy-btn::before { content: ''; position: absolute; inset: 0; background: var(--texture-stripes); pointer-events: none; border-radius: var(--radius-md); } /* Hover/Active: only apply when NOT disabled. :not(:disabled) prevents the lift effect on greyed-out buttons. */ .buy-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-3d-hover); } .buy-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--shadow-3d-active); } /* Disabled state — grey, no interaction. Applied by JS when player can't afford the item. */ .buy-btn:disabled { background: linear-gradient(135deg, #4a4a4a, #3a3a3a 50%, #2a2a2a); color: #777; cursor: not-allowed; box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 3px 0 #1a1a1a; } /* Blue "EQUIP" button for blades. Overrides the green buy background with info/blue gradient. */ .equip-blade-btn { background: var(--grad-info-btn); --wood-1: var(--info-darker); /* Blue 3D shadow */ box-shadow: inset 0 0 15px rgba(255,255,255,0.1), 0 5px 0 var(--info-darker), 0 8px 15px rgba(0,0,0,0.3); } /* Gold "EQUIPPED" button — shows the currently active blade. Static, no hover/active interaction (cursor:default not set here because .is-equipped on blade-equip-btn handles that in Part 6). Has a sweeping shine animation (applied on the detail screen version). */ .equipped-btn { background: linear-gradient(135deg, #f39c12, var(--gold) 50%, #f39c12); color: #fff; box-shadow: inset 0 0 10px rgba(0,0,0,0.1), 0 3px 0 #b9770e; } /* Green "Unlocked" text — for owned consumable items. Not a button, just a status label. */ .item-unlocked-text { color: var(--success); } /* Purple "LOCKED" button — item requires a prerequisite. Less prominent than buy/equip, signals "not yet available". */ .locked-store-btn { background: linear-gradient(135deg, var(--purple), #9b59b6); box-shadow: inset 0 0 10px rgba(0,0,0,0.1), 0 3px 0 #5e3370; } /* ─── 5.4 COIN SHOP ─────────────────────────────────────────────────────── */ /* Coin shop container — flexbox column, centered content. Simpler layout than the main store (no sidebar tabs). max-width:1400px prevents excessive width. */ .coin-shop-container { max-width: 1400px; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vw, 20px); position: relative; padding-bottom: 20px; } /* Coin shop grid — flexbox wrap instead of CSS grid. Used because coin packages have varying card sizes (unlike the uniform store item cards). Centers items both horizontally and vertically. */ #coinShopGrid { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: clamp(20px, 4vw, 40px); width: 100%; height: 100%; padding: 10px 20px 80px 20px; overflow-y: auto; overflow-x: hidden; } /* Coin shop scrollbar — same style as store grid */ #coinShopGrid::-webkit-scrollbar { width: 10px; display: block; } #coinShopGrid::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); border-radius: var(--radius-sm); margin: 30px 0 20px; } #coinShopGrid::-webkit-scrollbar-thumb { background: var(--orange); border-radius: var(--radius-sm); border: 1px solid var(--wood-2); } /* Coin shop cards: wider than store items, no square aspect ratio. overflow:visible allows the coin badge to protrude. */ #coinShopGrid .store-item { width: clamp(200px, 30vw, 250px); max-width: none; /* Overrides the 220px from store */ overflow: visible; /* Allows badge to overflow */ } /* Coin badge — the "BEST VALUE" / "POPULAR" label. Protrudes from the top-right corner, rotated 10deg. Color variants: .badge-red for "HOT", .badge-blue for "BEST VALUE" TO ADD A NEW BADGE COLOR: create .badge-green, etc. */ .coin-badge { position: absolute; top: -15px; /* Protrudes above card */ right: -15px; /* Protrudes beyond card edge */ padding: 5px 15px; color: white; font-family: var(--font-display); font-size: 0.9rem; border-radius: 5px; transform: rotate(10deg); box-shadow: 0 2px 5px rgba(0,0,0,0.5); z-index: 8; text-transform: uppercase; } .badge-red { background: linear-gradient(180deg, var(--danger), var(--danger-dark)); border: 2px solid #fff; } .badge-blue { background: linear-gradient(180deg, var(--info), var(--info-dark)); border: 2px solid #fff; } /* Coin image in the coin shop card — has a gold glow */ .coin-shop-coin-img { margin-top: 10px; margin-bottom: 5px; filter: drop-shadow(0 0 15px rgba(var(--gold-rgb), 0.4)); } /* Coin amount text (e.g., "+500") */ .coin-shop-amount-text { color: var(--gold); font-size: clamp(18px, 3vw, 24px); margin: 5px 0; } /* ─── 5.5 INVENTORY SPECIFICS ───────────────────────────────────────────── */ /* Inventory layout: same header-spacing pattern as other sub-screens. max-width:1600px for the wider inventory grid. */ .inventory-layout { margin-top: var(--header-total); height: calc(100% - var(--header-total)); width: 100%; max-width: 1600px; display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; } /* Inventory content area — no background/border (transparent). The store's content area inherits some styles we don't want here, so these rules reset them. */ .inventory-content-area { width: 100%; flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; background: transparent; border: none; box-shadow: none; margin-top: 15px; } /* Inventory section wrapper — fades in when switching tabs */ .inventory-section { width: 100%; height: 100%; display: flex; flex-direction: column; animation: storeFade 0.3s ease forwards; padding-right: 15px; } /* Inventory grid: uses auto-fill instead of fixed 4 columns. minmax(200px, 1fr) creates as many columns as fit, each at least 200px wide. More flexible than the store's fixed 4-column layout. */ .inventory-section .store-grid { padding-top: 20px; padding-left: 40px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); justify-content: center; } /* Inventory top tabs — "Foods" / "Blades" toggle buttons. Positioned in the header bar, right side. Replaces the player-stats that store/coin-shop have there. */ .inventory-top-tabs { position: absolute; top: 45px; transform: translateY(-50%); right: 20px; z-index: var(--z-detail-screens); display: flex; gap: 15px; } /* Individual inventory tab button. Dark background when inactive, gold highlight when active. Rounded pill shape (border-radius:20px). */ .inv-top-tab-btn { padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px); font-family: var(--font-display); font-size: clamp(14px, 2.5vw, 20px); color: #bbb; background: linear-gradient(135deg, var(--wood-3), var(--wood-1)); border: 3px solid var(--wood-4); border-radius: 20px; cursor: pointer; text-shadow: 2px 2px 0 #000; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 5px 10px rgba(0,0,0,0.5); text-transform: uppercase; letter-spacing: 1px; } .inv-top-tab-btn:hover { color: #fff; border-color: var(--wood-7); } /* Active inventory tab — gold border, brighter, slightly scaled up */ .inv-top-tab-btn.active { color: var(--gold); background: linear-gradient(135deg, var(--wood-7), #5a3a1a); border-color: var(--gold); transform: scale(1.05); box-shadow: inset 0 0 15px rgba(255,255,255,0.2), 0 5px 15px rgba(0,0,0,0.7); z-index: 5; } /* ── Locked Item State ─────────────────────────────────────────── Applied to store/inventory cards the player hasn't unlocked. Desaturated + dimmed. Hover restores some color to hint at what the item looks like. The blade orb inside locked items has its own dimming rules for the sphere to look "dead" rather than just grey. */ .locked-item { filter: grayscale(20%) brightness(0.8); box-shadow: inset 0 0 15px rgba(0,0,0,0.9), 0 0 0 3px #555; transition: filter 0.3s, transform 0.3s; } .locked-item:hover { filter: grayscale(0%) brightness(1); /* Restores color on hover */ box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 0 4px var(--danger), 0 10px 20px rgba(0,0,0,0.6); /* Red border hint */ } .locked-item .blade-color-preview { opacity: 1; filter: grayscale(15%) brightness(0.6); /* Very dim orb */ border-color: #555; box-shadow: inset 0 0 20px rgba(0,0,0,0.9); } .locked-item:hover .blade-color-preview { filter: grayscale(0%) brightness(0.9); /* Brightens on hover */ border-color: #888; } /* Food points display in inventory — shows point value. margin-top:auto pushes to card bottom (like buy-btn). */ .inv-food-points { margin-top: auto; padding-bottom: 15px; font-size: clamp(10px, 2vw, 20px); color: var(--gold); text-shadow: 1px 1px 0 #000; flex-direction: column; gap: 5px; } /* Equip button container in inventory — centers the button */ .inv-sword-equip-container { margin-top: auto; width: 100%; display: flex; justify-content: center; } /* Locked blade name — dimmed text color */ .locked-blade-name { color: #aaa; } /* Spacer — fills remaining space in locked blade cards that don't have a button, pushing other content to proper positions */ .locked-blade-spacer { flex-grow: 1; } /* ============================================================================ PART 6 — DETAIL SCREENS Purpose: Full-screen detail views for individual items. Maintenance: Food and Blade details share a sidebar pattern. ============================================================================ */ /* ── Shared Detail Screen Layout ───────────────────────────────── Both food and blade detail screens use: - Full viewport, absolute positioning - Same background image - Inner container with wood gradient, gold border, rounded corners - Sidebar on the right (via flex-direction: row-reverse) - Main content area filling the rest TO ADD A NEW DETAIL SCREEN (e.g., "Power-up Detail"): 1. Add .powerup-detail-screen to the :is() group below 2. Add .powerup-detail-container to the container :is() group 3. Create the main content and sidebar styles (can copy from food/blade) 4. Add back button positioning if needed (already handled if in Part 2.3 :is() group) */ :is(.food-detail-screen, .blade-detail-screen) { position: absolute; inset: 0; background-color: #1a0f05; background-image: url('assets/backgrounds/background 4.jpg'); background-size: cover; background-position: center; z-index: var(--z-detail-screens); display: flex; padding: 30px; color: white; } /* Inner container — the main panel that holds sidebar + content. row-reverse puts the sidebar on the RIGHT. Heavy inset shadow + gold border for a "framed" look. overflow:hidden keeps all content within the rounded corners. */ :is(.food-detail-container, .blade-detail-container) { display: flex; flex-direction: row-reverse; /* Sidebar on right */ width: 100%; height: 100%; background: linear-gradient(135deg, rgba(60, 30, 10, 0.85) 0%, rgba(20, 10, 0, 0.95) 100%); border-radius: var(--radius-xl); border: 4px solid var(--gold); overflow: hidden; box-shadow: inset 0 0 40px rgba(0,0,0,0.8), 0 15px 40px rgba(0,0,0,0.9); position: relative; } /* ── Shared Sidebar Styles ─────────────────────────────────────── The right-side panel that lists variants (food types or blades). Scrollable, dark background, gold-accented scrollbar. NOTE: Food sidebar has visible scrollbar, blade sidebar hides it. This is intentional — food sidebar has many items (variants), blade sidebar has fewer items and looks cleaner without it. */ :is(.detail-sidebar, .blade-detail-sidebar) { width: 280px; background: rgba(0,0,0,0.6); border-left: 2px solid rgba(var(--gold-rgb), 0.3); display: flex; flex-direction: column; padding: 30px 18px; gap: 14px; overflow-y: auto; box-shadow: inset 10px 0 20px rgba(0,0,0,0.5); /* Inner shadow on left edge */ scrollbar-width: none; /* Firefox: hide native scrollbar */ } /* WebKit scrollbar for sidebars */ :is(.detail-sidebar, .blade-detail-sidebar)::-webkit-scrollbar { width: 6px; display: block; } :is(.detail-sidebar, .blade-detail-sidebar)::-webkit-scrollbar-thumb { background: var(--gold); border-radius: var(--radius-sm); } /* Food sidebar: SHOW scrollbar (many variants, needs scrolling indicator) */ .detail-sidebar::-webkit-scrollbar { display: block; } /* Blade sidebar: HIDE scrollbar (fewer items, cleaner look) */ .blade-detail-sidebar::-webkit-scrollbar { display: none; } /* Food sidebar: slightly more padding and gap for readability */ .detail-sidebar { padding: 30px 20px; gap: 20px; background: rgba(0,0,0,0.6); } /* Sidebar titles — "FOODS" or "BLADES" heading */ :is(.sidebar-title, .blade-sidebar-title) { font-family: var(--font-display); color: #fff; text-align: center; margin-bottom: 10px; text-shadow: 2px 2px 0 #000, 0 0 15px rgba(255,255,255,0.3); letter-spacing: 2px; } .sidebar-title { font-size: 28px; } .blade-sidebar-title { font-size: 26px; } /* ── Shared Sidebar Cards ──────────────────────────────────────── Individual variant/item cards in the sidebar. Used for both food variants and blade list items. 3D button system: wood gradient, 3D shadow, hover lift, active press. .active: gold border + brighter wood (currently selected) .locked: grey, no interaction (not yet unlocked) ::before adds wood-grain texture. TO ADD A NEW SIDEBAR CARD TYPE: add its class to the :is() groups. The shared styles handle most of the visual work. */ :is(.variant-btn, .blade-sidebar-card) { display: flex; align-items: center; gap: 15px; background: linear-gradient(180deg, var(--wood-4), var(--wood-3)); border: 3px solid var(--wood-2); border-radius: var(--radius-md); padding: 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */ width: 100%; box-shadow: inset 0 2px 5px rgba(255,255,255,0.1), 0 6px 0 var(--wood-1), 0 10px 15px rgba(0,0,0,0.5); position: relative; overflow: hidden; } /* Wood-grain texture overlay for sidebar cards */ :is(.variant-btn, .blade-sidebar-card)::before { content: ''; position: absolute; inset: 0; background: var(--texture-stripes); pointer-events: none; border-radius: var(--radius-md); } /* Hover: lifts up, deeper shadow. :not(.locked) excludes locked cards. */ :is(.variant-btn, .blade-sidebar-card):hover:not(.locked) { transform: translateY(-3px); box-shadow: inset 0 2px 5px rgba(255,255,255,0.2), 0 9px 0 var(--wood-1), 0 15px 20px rgba(0,0,0,0.6); } /* Active: pressed down */ :is(.variant-btn, .blade-sidebar-card):active:not(.locked) { transform: translateY(3px); box-shadow: inset 0 2px 5px rgba(0,0,0,0.3), 0 0 0 var(--wood-1), 0 5px 10px rgba(0,0,0,0.5); } /* Active/selected state: gold border, brighter wood, gold glow */ :is(.variant-btn, .blade-sidebar-card).active { background: linear-gradient(180deg, var(--wood-8), #6b4018); border-color: var(--gold); box-shadow: inset 0 2px 8px rgba(255,255,255,0.3), 0 6px 0 #4a2800, 0 0 20px rgba(var(--gold-rgb), 0.4); } /* Locked state: grey, no cursor, faded */ :is(.variant-btn, .blade-sidebar-card).locked { background: linear-gradient(180deg, #333, #1a1a1a); border-color: #000; cursor: not-allowed; opacity: 0.7; } /* Blade sidebar card: slightly different padding for blade list items */ .blade-sidebar-card { padding: 12px 15px; min-height: 75px; justify-content: flex-start; } /* Variant thumbnail image (food type image in sidebar) */ .variant-thumb { width: 55px; height: 55px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } /* Text content area next to thumbnail */ .variant-info { display: flex; flex-direction: column; align-items: flex-start; } /* Item name in sidebar card */ .variant-name, .blade-card-name { font-family: var(--font-display); color: #fff; text-shadow: 2px 2px 0 #000; letter-spacing: 1px; white-space: normal; text-align: left; } .variant-name { font-size: 18px; } .blade-card-name { font-size: 15px; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } /* Status text below the name ("OWNED", "LOCKED", "EQUIPPED") */ .variant-status, .blade-card-status { font-size: 13px; font-weight: bold; text-transform: uppercase; line-height: 1; } /* Owned status: gold text */ .variant-status, .blade-card-status.owned { color: var(--gold); } /* Locked status: red text */ .variant-status.locked-status, .blade-card-status.locked-status { color: var(--danger); } /* Equipped status: green text, slightly smaller */ .blade-card-status.equipped { color: var(--success); font-size: 12px; } /* ─── 6.1 FOOD DETAIL SPECIFICS ────────────────────────────────────────── */ /* Main content area — left side of the detail screen. Flexbox column, centered content. padding: 30px 60px 30px 40px — more right padding to create space from the sidebar border. */ .detail-main-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 60px 30px 40px; position: relative; overflow: hidden; gap: 0; } /* Food name — large display text at the top. 8-direction black text-shadow for white stroke effect. order:1 ensures correct flex order (name above image). */ .detail-main-name { font-family: var(--font-display); font-size: clamp(42px, 7vw, 72px); color: #ffcc00; text-shadow: -3px -3px 0 #000, 0 -3px 0 #000, 3px -3px 0 #000, -3px 0 0 #000, 3px 0 0 #000, -3px 3px 0 #000, 0 3px 0 #000, 3px 3px 0 #000; margin: -20px 0 clamp(10px, 2vh, 25px) 0; z-index: 1; letter-spacing: 4px; text-transform: uppercase; text-align: center; line-height: 1.1; order: 1; } /* Food image — large, centered, with floating animation. order:2 places it between name and action row. */ .detail-main-img { width: clamp(160px, 22vw, 240px); height: auto; aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.6)); z-index: 1; animation: floatFood 3s ease-in-out infinite; /* Gentle float */ order: 2; margin-bottom: clamp(10px, 2vh, 20px); } /* Action row — holds the points badge and equip button. Flexbox row, centered, with gap between items. */ .food-action-row { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; justify-content: center; gap: 20px; order: 3; width: 100%; max-width: 450px; margin-top: 15px; z-index: 5; } /* Extra top margin when action row is inside the main area */ .detail-main-area .food-action-row { margin-top: clamp(40px, 6vh, 60px); } /* Points badge and equip button within the action row — override the default margins to work in the row layout */ .food-action-row .detail-points { margin: 0; order: unset; padding: 10px 25px; display: flex; align-items: center; font-size: clamp(16px, 2.5vw, 22px); } .food-action-row .food-equip-area { margin: 0; width: auto; display: flex; flex-direction: row; justify-content: center; } .food-action-row .blade-equip-btn { margin: 0; padding: 12px 35px; display: flex; align-items: center; font-size: clamp(16px, 2.5vw, 22px); min-width: 160px; border-radius: var(--radius-md); border: 3px solid transparent; text-align: center; letter-spacing: 2px; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Points badge — shows the food's point value. Pill shape (border-radius:40px), white border, dark background. Used in both the detail screen and inventory cards. */ .detail-points { font-family: var(--font-display); font-size: clamp(18px, 3vw, 26px); color: #fff; background: rgba(0,0,0,0.6); padding: 8px 28px; border-radius: 40px; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 0 8px rgba(var(--gold-rgb), 0.2); z-index: 1; text-shadow: 2px 2px 0 #000; order: 3; letter-spacing: 1px; white-space: nowrap; } /* ── Shared Equip Button ───────────────────────────────────────── Used in: Food Detail, Blade Detail, Inventory. Has 3 states: - .can-equip: Blue, interactive, 3D hover/active - .is-equipped: Gold, non-interactive, sweeping shine animation - .is-locked: Grey, non-interactive, "not-allowed" cursor ::before adds wood-grain texture (shared across all states). ::after adds sweeping shine ONLY on .is-equipped state. TO CHANGE EQUIP BUTTON COLORS: - Edit the gradient in .can-equip (currently info/blue) - Edit the gradient in .is-equipped (currently gold) - Edit the gradient in .is-locked (currently grey) The 3D shadow color is controlled by the box-shadow directly (not via --wood-1 override, because these use custom shadows). */ .blade-equip-btn { text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px 0 #000; position: relative; overflow: hidden; border-radius: 0; /* Overridden per state below */ border: none; /* Overridden per state below */ box-shadow: none; /* Overridden per state below */ padding: 14px 40px; font-family: var(--font-display); font-size: clamp(16px, 2.5vw, 22px); color: #fff; cursor: pointer; } /* Wood-grain texture overlay — shared across all equip button states */ .blade-equip-btn::before { content: ''; position: absolute; inset: 0; background: var(--texture-stripes); pointer-events: none; border-radius: 0; /* Matches parent's overridden border-radius */ } /* STATE 1: Can Equip — blue button, fully interactive. 3D shadow with info-darker as the extrusion color. Hover lifts, active presses — standard 3D button behavior. */ .blade-equip-btn.can-equip { background: var(--grad-info-btn); border: 3px solid #fff; border-radius: var(--radius-md); box-shadow: 0 6px 0 var(--info-darker), 0 10px 20px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.2); } .blade-equip-btn.can-equip:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--info-darker), 0 15px 25px rgba(0,0,0,0.6); } .blade-equip-btn.can-equip:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--info-darker), 0 4px 8px rgba(0,0,0,0.4); } /* STATE 2: Is Equipped — gold button, non-interactive. Shows the currently active item. No hover/active effects. ::after creates a diagonal light sweep that loops every 3s, giving a "premium equipped" feel. cursor:default prevents the pointer cursor. To make it clickable (e.g., to unequip), change cursor and add hover/active rules. */ .blade-equip-btn.is-equipped { background: linear-gradient(135deg, #f39c12, var(--gold) 50%, #f39c12); border: 3px solid #fff; border-radius: var(--radius-md); box-shadow: 0 6px 0 #b9770e, 0 10px 20px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.3); cursor: default; } /* Sweeping shine effect — diagonal white gradient that slides across. 45deg rotation + translateX creates the diagonal sweep. 3s infinite loop with ease-in-out for smooth pacing. */ .blade-equip-btn.is-equipped::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%); animation: equippedShine 3s infinite ease-in-out; pointer-events: none; } /* STATE 3: Is Locked — grey button, clearly non-interactive. Flat appearance with minimal shadow. cursor:not-allowed signals "you can't use this". */ .blade-equip-btn.is-locked { background: linear-gradient(135deg, #4a4a4a, #333 50%, #2a2a2a); border: 3px solid #555; border-radius: var(--radius-md); box-shadow: 0 3px 0 #1a1a1a; color: #777; cursor: not-allowed; } /* ── Navigation Arrows in Detail Screens ───────────────────────── Left/right arrows to navigate between foods/blades. Positioned at the vertical center of the main content area. SVG icons inside, colored gold, with drop shadow. Hover: scales up + gold glow. Active: scales down for press feedback. TO CHANGE ARROW SIZE: edit the clamp values in width/height. TO CHANGE ARROW COLOR: edit the color property (currently var(--gold)). */ .food-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(50px, 8vw, 80px); height: clamp(50px, 8vw, 80px); background: transparent; border: none; box-shadow: none; /* Intentionally flat — just an icon, no button frame */ color: var(--gold); cursor: pointer; z-index: 8; display: flex; justify-content: center; align-items: center; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* SVG icon inside the nav button — fills parent, inherits color */ .food-nav-btn svg { width: 100%; height: 100%; fill: currentColor; /* Inherits from .food-nav-btn color */ filter: drop-shadow(2px 2px 0 #000); transition: filter 0.2s ease; } /* Hover: scale up + add gold glow via drop-shadow */ .food-nav-btn:hover { background: transparent; box-shadow: none; /* Explicitly reset to prevent inheritance issues */ transform: translateY(-50%) scale(1.25); } .food-nav-btn:hover svg { filter: drop-shadow(2px 2px 0 #000) drop-shadow(0 0 10px rgba(var(--gold-rgb), 0.8)); } /* Active: scale down for "press" feedback */ .food-nav-btn:active { transform: translateY(-50%) scale(0.9); } /* Position variants — left and right edges of the content area */ .prev-btn { left: clamp(8px, 2vw, 30px); } .next-btn { right: clamp(8px, 2vw, 30px); } /* ── Detail Screen Back Button (Circle Variant) ────────────────── Different from the arrow-shaped .back-arrow-btn used in sub-screens. This is a CIRCULAR button with an arrow icon inside. Used only in food and blade detail screens. Wood gradient background, gold border, circular shape. Hover: scales up + gold inner glow. Active: scales down. */ .detail-back-btn { position: absolute; top: 15px; left: 15px; width: clamp(35px, 5vw, 48px); height: clamp(35px, 5vw, 48px); background: linear-gradient(135deg, var(--wood-3), var(--wood-1)); border: 3px solid var(--gold); border-radius: var(--radius-full); display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: var(--z-modal); /* Above all detail content */ box-shadow: 0 5px 15px rgba(0,0,0,0.8), inset 0 2px 5px rgba(255,255,255,0.2); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); color: var(--gold); } /* Arrow SVG inside the back button */ .detail-back-btn svg { width: 55%; height: 55%; fill: currentColor; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5)); margin-right: 2px; /* Slight visual offset for the arrow shape */ } .detail-back-btn:hover { transform: scale(1.1); background: linear-gradient(135deg, var(--wood-4), var(--wood-3)); box-shadow: 0 8px 20px rgba(0,0,0,0.9), inset 0 0 15px rgba(var(--gold-rgb), 0.4); } .detail-back-btn:active { transform: scale(0.95); } /* ─── 6.2 BLADE DETAIL SPECIFICS ────────────────────────────────────────── */ /* ── Blade Preview Orb in Sidebar Cards ────────────────────────── Smaller version of the blade-color-preview used in the sidebar. Same 3-layer construction: background color + ::before (inner shadow) + ::after (highlight reflection). .dimmed variant: used for locked blades in the sidebar, reduced opacity to visually separate from owned blades. */ .blade-card-preview { width: 45px; height: 45px; flex-shrink: 0; margin: 0; border-radius: var(--radius-full); border: 3px solid rgba(255,255,255,0.8); position: relative; z-index: 1; } /* Inner shadow — 3D sphere illusion (smaller version) */ .blade-card-preview::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-full); box-shadow: inset -10px -10px 20px rgba(0,0,0,0.6), inset 5px 5px 15px rgba(255,255,255,0.4); z-index: 2; pointer-events: none; } /* Highlight reflection — top-left bright spot (smaller version) */ .blade-card-preview::after { content: ''; position: absolute; top: 4%; left: 15%; width: 70%; height: 40%; border-radius: 50% 50% 50% 50% / 60% 40% 40% 40%; /* Egg shape for realism */ background: linear-gradient(to bottom, rgba(255,255,255,0.9), transparent); z-index: 3; pointer-events: none; } /* Dimmed state for locked blades in sidebar */ .blade-card-preview.dimmed { opacity: 0.4; } /* Text info area next to the orb in sidebar cards. Width calculated to fill remaining space after the 45px orb + 15px gap. */ .blade-card-info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: center; width: calc(100% - 70px); /* 45px orb + 15px gap + 10px buffer */ position: relative; z-index: 1; } /* Lock icon — appears at the right edge of locked blade cards. Red color, slightly transparent. */ .blade-lock-icon { position: absolute; top: 50%; transform: translateY(-50%); right: 15px; font-size: 18px; color: var(--danger); opacity: 0.7; z-index: 2; } /* ── Blade Detail Main Content Area ────────────────────────────── Left side of the blade detail screen. Holds: name → preview canvas → equip button. ::before adds a large ambient gold glow behind the content. */ .blade-detail-main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 30px; position: relative; gap: 15px; overflow: hidden; height: 100%; } /* Ambient gold glow — large, soft, pulsing circle. Positioned behind all content (z-index:0). Creates a "spotlight" effect for the blade preview. */ .blade-detail-main::before { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(var(--gold-rgb), 0.1), transparent 70%); border-radius: var(--radius-full); z-index: 0; animation: pulseLight 4s infinite alternate; /* Subtle pulsing */ } /* Blade name — large gold text with 8-direction black shadow. order:1 places it at the top of the flex column. */ .blade-detail-name { font-family: var(--font-display); font-size: clamp(36px, 6vw, 60px); color: var(--gold); text-shadow: -3px -3px 0 #000, 0 -3px 0 #000, 3px -3px 0 #000, -3px 0 0 #000, 3px 0 0 #000, -3px 3px 0 #000, 0 3px 0 #000, 3px 3px 0 #000; letter-spacing: 3px; text-transform: uppercase; z-index: 1; order: 1; margin: 0; } /* ── Blade Preview Canvas Area ─────────────────────────────────── The interactive area where the player can test-swing the blade. 16:9 aspect ratio, dark background, subtle border. Contains a for the blade trail rendering and a hint text overlay that fades out on first interaction. cursor:crosshair maintains the "sword" feel. max-height:58vh prevents the preview from being too tall on portrait screens. TO CHANGE PREVIEW SIZE: edit max-width or aspect-ratio. TO CHANGE PREVIEW BACKGROUND: edit the radial-gradient below. */ .blade-preview-area { position: relative; width: 93%; max-width: 630px; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at center, rgba(20, 15, 10, 1), rgba(5, 3, 1, 1)); border-radius: 20px; border: 3px solid rgba(255,255,255,0.12); overflow: hidden; box-shadow: inset 0 0 50px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.6); cursor: crosshair; z-index: 1; order: 2; flex: 0 0 auto; /* Don't grow or shrink — respect aspect-ratio */ min-height: 0; max-height: 58vh; /* Prevents excessive height on portrait screens */ } /* The actual canvas element — fills the preview area. JS draws the blade trail effect on this canvas. */ .blade-preview-canvas { width: 100%; height: 100%; display: block; } /* Hint text — "SWIPE TO PREVIEW" that shows before first interaction. Centered, very faint (0.2 opacity). JS adds .fade-out class to hide it after the first swipe. TO CHANGE HINT TEXT: edit the HTML content, not CSS. TO CHANGE HINT STYLE: edit color, opacity, font-size below. */ .blade-preview-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: clamp(16px, 2.5vw, 24px); color: rgba(255,255,255,0.2); /* Very subtle */ text-shadow: 2px 2px 0 rgba(0,0,0,0.5); pointer-events: none; /* Clicks pass through to canvas */ transition: opacity 0.4s; letter-spacing: 3px; text-transform: uppercase; z-index: 2; } /* JS adds this class after first swipe to fade out the hint */ .blade-preview-hint.fade-out { opacity: 0; } /* Equip button area — wraps the equip button at the bottom. Flexbox row to center the button horizontally. */ .blade-equip-area { z-index: 1; display: flex; gap: 15px; align-items: center; order: 3; margin: 0; flex-shrink: 0; } /* ─── 6.3 SWORD SIZE PREVIEW SCREEN ─────────────────────────────── */ /* Full-screen overlay for previewing sword size changes. Split layout: canvas on the left, controls on the right, separated by a decorative vertical line. ::before adds a dark overlay on the background image for better contrast of the UI elements. TO CHANGE LAYOUT DIRECTION: change flex-direction from row to column (for portrait layout). */ .sword-size-preview-screen { position: absolute; inset: 0; z-index: 32; /* Above detail screens, below modals */ display: flex; flex-direction: row; /* Side-by-side: canvas | controls */ align-items: center; justify-content: center; color: white; animation: storeFade 0.4s ease-out forwards; /* Fade in on open */ overflow: hidden; gap: clamp(20px, 4vw, 50px); padding: 0 clamp(20px, 4vw, 50px); background-color: #1a0f05; background-image: url('assets/backgrounds/background 4.jpg'); background-size: cover; background-position: center; } /* Dark overlay on the background image */ .sword-size-preview-screen::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 0; } /* ── Preview Canvas Wrapper ────────────────────────────────────── The left-side container holding the sword preview canvas. 16:10 aspect ratio (slightly taller than blade preview's 16:9). Dark radial gradient background via ::before. Gold-tinted outer glow via box-shadow. flex-shrink:0 prevents it from being squeezed by the controls panel. */ .sword-size-canvas-wrapper { position: relative; width: clamp(300px, 45vw, 600px); aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; cursor: crosshair; border: 1px solid rgba(255,255,255,0.15); box-shadow: inset 0 0 60px rgba(0,0,0,0.5), 0 8px 30px rgba(0,0,0,0.4), 0 0 80px rgba(var(--gold-rgb), 0.1); z-index: 1; flex-shrink: 0; } /* Dark radial gradient background inside the canvas wrapper. z-index:0 places it behind the canvas (z-index:1). */ .sword-size-canvas-wrapper::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(40, 25, 15, 0.8), rgba(10, 5, 0, 0.95)); z-index: 0; } /* The canvas element — fills the wrapper. JS draws the sword trail at the current size setting. */ .sword-size-preview-canvas { width: 100%; height: 100%; display: block; position: relative; z-index: 1; } /* ── Hint Overlay ──────────────────────────────────────────────── Shows "SWIPE TO PREVIEW" with a hand/finger icon before the player interacts. Fades out after first swipe. Two parts: icon (ss-hint-icon) + text label. The icon has its own float animation for attention. */ .sword-size-preview-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: 2; transition: opacity 0.5s ease; } /* Circular icon container with a hand/finger SVG inside. Subtle border, floating animation for gentle attention draw. */ .ss-hint-icon { width: clamp(40px, 6vw, 52px); height: clamp(40px, 6vw, 52px); border: 1.5px solid rgba(255,255,255,0.3); border-radius: var(--radius-full); display: flex; justify-content: center; align-items: center; animation: ssHintFloat 2.5s infinite ease-in-out; } .ss-hint-icon svg { width: 40%; height: 40%; fill: rgba(255,255,255,0.6); } /* Hint text below the icon */ .sword-size-preview-hint span { font-family: var(--font-display); font-size: clamp(12px, 1.8vw, 16px); color: rgba(255,255,255,0.6); text-shadow: 1px 1px 2px rgba(0,0,0,0.8); letter-spacing: 5px; text-transform: uppercase; } /* JS adds this after first swipe */ .sword-size-preview-hint.fade-out { opacity: 0; } /* ── Decorative Divider Line ───────────────────────────────────── Vertical line between the canvas and the controls panel. Gold gradient: transparent → gold → transparent. Height matches the taller of the two panels. flex-shrink:0 prevents it from being squeezed. */ .ss-divider-line { width: 1px; height: clamp(200px, 35vh, 350px); background: linear-gradient(to bottom, transparent, rgba(var(--gold-rgb), 0.3) 30%, rgba(var(--gold-rgb), 0.3) 70%, transparent); flex-shrink: 0; z-index: 1; } /* ── Controls Panel ────────────────────────────────────────────── Right-side panel with: title, percentage display, visual comparison, and the size slider. Fixed width (clamp 220-320px) to maintain consistent proportions regardless of screen size. flex-shrink:0 prevents the canvas from squeezing it. */ .ss-controls-panel { display: flex; flex-direction: column; align-items: center; width: clamp(220px, 25vw, 320px); position: relative; z-index: 1; gap: clamp(12px, 2vw, 20px); flex-shrink: 0; } /* "SWORD SIZE" label above the percentage */ .ss-center-title { font-family: var(--font-display); font-size: clamp(14px, 2.2vw, 20px); color: rgba(255,255,255,0.8); text-shadow: 2px 2px 2px rgba(0,0,0,0.8); letter-spacing: 6px; text-transform: uppercase; } /* ── Hero Percentage Display ───────────────────────────────────── The big number (e.g., "120%") that's the focal point of the controls panel. Flexbox baseline alignment keeps the "%" symbol aligned with the bottom of the number. The number has a subtle transform transition that JS triggers for a quick "pop" when the value changes. */ .ss-hero-percentage { position: relative; display: flex; align-items: baseline; justify-content: center; } /* The big percentage number. Gold color with glow text-shadow. transform transition: JS briefly scales it to 1.05 when the slider value changes, then it springs back. */ .sword-size-number { font-family: var(--font-display); font-size: clamp(56px, 10vw, 90px); color: var(--gold); text-shadow: 0 0 30px rgba(var(--gold-rgb), 0.4), 3px 3px 0 rgba(0,0,0,0.8); line-height: 1; position: relative; z-index: 2; transition: transform 0.12s ease; /* Quick spring for value changes */ } /* The "%" symbol — smaller, slightly transparent gold */ .ss-percentage-symbol { font-family: var(--font-display); font-size: clamp(22px, 4vw, 34px); color: rgba(var(--gold-rgb), 0.8); margin-left: 4px; z-index: 2; text-shadow: 2px 2px 0 rgba(0,0,0,0.8); } /* ── Visual Size Comparison ────────────────────────────────────── Two horizontal lines showing the default size vs. current size. Helps the player visualize the difference. .line-default: white/grey — shows the 100% baseline .line-current: gold glow — shows the current setting Lines are separated by a small vertical divider. JS updates the .line-current width based on the slider value. The transition makes the width change smooth. */ .ss-size-visual { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.5vw, 14px); width: 100%; } .ss-visual-line { width: 50%; /* Default — JS overrides for .line-current */ height: 4px; border-radius: 4px; transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth resize */ } /* Default (100%) line — subtle white */ .ss-visual-line.line-default { background: rgba(255,255,255,0.4); } /* Current size line — gold with glow. JS sets width to (currentSize / defaultSize * 50)% */ .ss-visual-line.line-current { background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.9), transparent); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4); } /* Labels below the visual lines */ .ss-visual-label { font-family: var(--font-body); font-size: clamp(8px, 1.2vw, 10px); color: rgba(255,255,255,0.7); letter-spacing: 1px; text-transform: uppercase; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); } /* Active label — brighter gold when that line is highlighted */ .ss-visual-label.label-active { color: rgba(var(--gold-rgb), 0.9); } /* Small vertical divider between the two lines */ .ss-visual-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.3); } /* ── Slider Container ──────────────────────────────────────────── Box that wraps the slider with a label and the current value. Subtle gradient background, rounded, with a thin border. Top row: "SIZE" label on left, current value on right. Below: the actual slider (.ss-preview-slider from Part 2.4). */ .ss-slider-box { width: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(0,0,0,0.5)); padding: clamp(14px, 2.2vw, 20px) clamp(16px, 2.5vw, 24px); border-radius: 18px; border: 1px solid rgba(255,255,255,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 25px rgba(0,0,0,0.5); } /* Top row inside the slider box: label + value */ .ss-slider-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(8px, 1.5vw, 12px); } /* "SIZE" label — small, uppercase, muted */ .ss-slider-left-label { font-family: var(--font-body); font-size: clamp(9px, 1.3vw, 11px); color: rgba(255,255,255,0.8); letter-spacing: 2px; text-transform: uppercase; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); } /* Current value display — gold, display font, larger than label. JS updates this text as the slider moves. */ .ss-preview-slider-value { font-family: var(--font-display); font-size: clamp(18px, 3.2vw, 24px); color: var(--gold); text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.4), 2px 2px 0 rgba(0,0,0,0.8); line-height: 1; } /* ============================================================================ PART 7 — MODALS & OVERLAYS Purpose: Popup dialogs that appear over other content. Maintenance: All modals share the same backdrop + bounce-in pattern. ============================================================================ */ /* ─── 7.1 PAUSE MENU ────────────────────────────────────────────────────── */ /* Pause overlay: semi-transparent black backdrop. Fades in via overlayFadeIn animation. Centered flexbox to position the pause box. TO CHANGE BACKDROP DARKNESS: edit the rgba alpha (currently 0.6). Higher = darker backdrop = more focus on the pause box. */ .pause-menu { position: absolute; inset: 0; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: var(--z-pause); animation: overlayFadeIn 0.4s ease-out forwards; } /* Pause box: the wooden panel holding the title and buttons. Wood gradient background, gold border, heavy inset shadow for the "carved wood" feel. bounceIn animation: playful scale-in with overshoot. */ .pause-box { background: linear-gradient(135deg, var(--wood-4), var(--wood-3)); padding: clamp(30px, 5vw, 45px) clamp(30px, 6vw, 50px); width: 90%; max-width: clamp(380px, 60vw, 550px); border-radius: var(--radius-lg); box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 0 6px var(--wood-7), 0 20px 50px rgba(0,0,0,0.8); text-align: center; display: flex; flex-direction: column; gap: 30px; animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } /* "PAUSED" title text */ .pause-title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--gold); white-space: nowrap; text-shadow: 3px 3px 0 #000; margin: 0; letter-spacing: 3px; text-transform: uppercase; } /* Button grid: 2 columns, even spacing. The "HOME" button spans both columns via grid-column: 1 / -1 (unless the .two-per-row modifier is applied). */ .pause-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 100%; } /* ── Unified Pause Button System ───────────────────────────────── All pause buttons share the same base .pause-btn class: - Full-width within their grid cell - Display font, uppercase, white text - 3D shadow system (rest/hover/active) - ::before adds wood-grain texture - SVG icon on the left side of the text Each button variant only changes: 1. background gradient (color) 2. --wood-1 (3D shadow bottom color) 3. Initial box-shadow Hover/active states are INHERITED from the base .pause-btn rules, so adding a new button color requires only 3 property changes. TO ADD A NEW PAUSE BUTTON: 1. Add a