/* Angel Fish Game — brand teal accents */ /* ============================================================ STANDALONE APP MODE (native iOS app / installed PWA) Triggered by . Hides the portfolio chrome so it feels like a dedicated game app, and respects the device safe area (notch / Dynamic Island). The web version keeps its mini-bar + "Portfolio" back button untouched. ============================================================ */ html.app-standalone .diamond-mini-bar, html.app-standalone .angel-fish-back { display: none !important; } html.app-standalone .game-container { padding-top: env(safe-area-inset-top, 0px); } html.app-standalone .game-ui { top: calc(env(safe-area-inset-top, 0px) + 10px); } html.app-standalone .game-controls { top: calc(env(safe-area-inset-top, 0px) + 10px); } /* Sky-over-water scene backdrop (sky: #00B4DB→#0083B0, water: #02AAB0→#00CDAC). Wispy clouds in the sky half, soft god-rays in the water half, horizon at 50%. */ body.angel-fish-page { overflow: hidden; background-color: #0083B0; background-image: radial-gradient(70px 24px at 20% 14%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%), radial-gradient(95px 30px at 68% 9%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 72%), radial-gradient(55px 20px at 42% 22%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%), radial-gradient(120px 30px at 86% 30%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 72%), repeating-linear-gradient(108deg, rgba(255, 255, 255, 0.10) 0 5px, rgba(255, 255, 255, 0) 5px 34px), linear-gradient(to bottom, #00b4db 0%, #0083b0 50%, #02aab0 50%, #00cdac 100%); background-repeat: no-repeat; background-size: auto, auto, auto, auto, 100% 50%, 100% 100%; background-position: 0 0, 0 0, 0 0, 0 0, center bottom, 0 0; background-attachment: scroll; } /* Keep the scene bright in dark mode too (it's game art, not page chrome) */ body.angel-fish-page.dark-mode, body.angel-fish-page[data-theme="dark"] { background-color: #0083b0; } body.angel-fish-page.page-has-bg::before, body.angel-fish-page.page-has-bg::after { display: none; } .angel-fish-back { position: fixed; top: 72px; left: 16px; z-index: 200; background: rgba(255, 255, 255, 0.95); padding: 10px 20px; border-radius: 999px; border: 2.5px solid #ffffff; text-decoration: none; color: var(--brand-teal, #3b6b5e); font-weight: 800; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 3px 0 rgba(255, 174, 24, 0.35), 0 6px 16px rgba(0, 0, 0, 0.18); transition: transform 0.16s cubic-bezier(0.18, 0.89, 0.32, 1.28); } .angel-fish-back:hover { transform: translateY(-2px); } .game-container { position: relative; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 56px; } #gameCanvas { background: linear-gradient(to bottom, #87ceeb 0%, #98d8c8 50%, #87ceeb 100%); border: 3px solid #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); max-width: 100%; max-height: calc(100vh - 80px); touch-action: none; } .game-ui { position: absolute; top: 72px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; z-index: 10; pointer-events: none; } .score-display, .level-display { background: rgba(255, 255, 255, 0.95); padding: 9px 16px; border-radius: 999px; border: 2.5px solid #ffffff; font-weight: 800; font-size: 0.95rem; color: #2d5247; box-shadow: 0 3px 0 rgba(255, 174, 24, 0.35), 0 6px 14px rgba(0, 0, 0, 0.14); } .game-menu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* White card with a glossy blue→cyan→pink gradient sticker border */ background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(140deg, #4da6ff 0%, #28d2ef 45%, #ff7ad9 100%) border-box; border: 6px solid transparent; padding: 34px 30px; border-radius: 30px; text-align: center; z-index: 100; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30); max-width: 92%; max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Purple "pill" title banner straddling the top edge (FLAG MASTER style) */ .game-menu h2 { display: inline-block; font-size: 1.5rem; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; color: #ffffff; background: linear-gradient(180deg, #8d63ff 0%, #6a3df0 100%); border: 3px solid #ffffff; border-radius: 999px; padding: 9px 30px; margin: -52px 0 16px; text-shadow: 0 2px 0 rgba(58, 28, 138, 0.45); box-shadow: 0 5px 0 rgba(74, 40, 160, 0.55), 0 12px 22px rgba(0, 0, 0, 0.28); } .game-menu h1 { font-size: 2rem; color: var(--brand-teal, #3b6b5e); margin: 0 0 12px; } /* Bubbly arcade game title — glossy gradient fill + white sticker outline */ .game-title { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0 0 14px; font-family: 'Arial Rounded MT Bold', 'Baloo 2', 'Fredoka', 'Trebuchet MS', system-ui, sans-serif; font-weight: 900; text-transform: uppercase; line-height: 0.9; letter-spacing: 1px; animation: gameTitlePop 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28) both; } /* Generated bubbly arcade logo image */ .game-title-img { display: block; width: min(80%, 300px); height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22)); } /* Fallback CSS wordmark (used only if the image is replaced by text) */ .game-title span { display: block; font-size: clamp(2.6rem, 13vw, 3.6rem); background: linear-gradient(180deg, #ffe23d 0%, #ffae18 48%, #ff6a1f 100%); -webkit-background-clip: text; background-clip: text; color: #ff8a00; -webkit-text-fill-color: transparent; -webkit-text-stroke: 6px #ffffff; paint-order: stroke fill; filter: drop-shadow(0 3px 0 rgba(193, 78, 0, 0.45)) drop-shadow(0 7px 9px rgba(0, 0, 0, 0.28)); } .game-title .game-title__l2 { transform: rotate(-3deg); margin-top: -4px; } .game-tagline { color: #555; margin: 0 0 20px; line-height: 1.5; font-weight: 600; } @keyframes gameTitlePop { from { transform: scale(0.7) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .game-title { animation: none; } } .game-menu p { color: #555; margin: 0 0 20px; line-height: 1.55; } /* Candy arcade buttons — glossy GREEN primary with white sticker outline + chunky 3D base; YELLOW secondary. Matches FLAG MASTER style. */ .btn-game { background: linear-gradient(180deg, #6fe06a 0%, #34c24a 52%, #1f9e3a 100%); color: #0b4a1c; border: 3px solid #ffffff; padding: 15px 34px; font-size: 1.1rem; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; border-radius: 999px; cursor: pointer; margin: 8px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 6px 0 #157a2c, 0 12px 22px rgba(21, 122, 44, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.55); transition: transform 0.16s cubic-bezier(0.18, 0.89, 0.32, 1.28), box-shadow 0.2s ease, filter 0.2s ease; } .btn-game:hover { filter: brightness(1.05); transform: translateY(-3px); box-shadow: 0 9px 0 #157a2c, 0 18px 30px rgba(21, 122, 44, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.65); } .btn-game:active { transform: translateY(3px); box-shadow: 0 2px 0 #157a2c, 0 6px 14px rgba(21, 122, 44, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4); } /* Secondary action — glossy yellow (FLAG MASTER "HOME" style) */ .btn-game--muted { background: linear-gradient(180deg, #ffe14d 0%, #ffc21e 52%, #ff9e0f 100%); color: #7a4a00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 6px 0 #d4870a, 0 12px 22px rgba(212, 135, 10, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.6); } .btn-game--muted:hover { box-shadow: 0 9px 0 #d4870a, 0 18px 30px rgba(212, 135, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.7); } .btn-game--muted:active { box-shadow: 0 2px 0 #d4870a, 0 6px 14px rgba(212, 135, 10, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.45); } /* ---- Difficulty chooser (Easy / Medium / Hard) ---- */ .game-choose { font-weight: 800; color: #2d5247; text-transform: uppercase; letter-spacing: 0.06em; margin: 4px 0 12px; font-size: 0.9rem; } .difficulty-select { display: flex; flex-direction: column; gap: 12px; align-items: stretch; max-width: 260px; margin: 0 auto 4px; } .btn-diff { width: 100%; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } /* Easy keeps the green primary look (.btn-game default) */ /* Medium = glossy yellow */ .btn-diff--medium { background: linear-gradient(180deg, #ffe14d 0%, #ffc21e 52%, #ff9e0f 100%); color: #7a4a00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 6px 0 #d4870a, 0 12px 22px rgba(212, 135, 10, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.6); } .btn-diff--medium:hover { box-shadow: 0 9px 0 #d4870a, 0 18px 30px rgba(212, 135, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.7); } .btn-diff--medium:active { box-shadow: 0 2px 0 #d4870a, 0 6px 14px rgba(212, 135, 10, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.45); } /* Hard = glossy red */ .btn-diff--hard { background: linear-gradient(180deg, #ff8080 0%, #f0383d 52%, #c41e2a 100%); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); box-shadow: 0 6px 0 #9e1620, 0 12px 22px rgba(158, 22, 32, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4); } .btn-diff--hard:hover { box-shadow: 0 9px 0 #9e1620, 0 18px 30px rgba(158, 22, 32, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.5); } .btn-diff--hard:active { box-shadow: 0 2px 0 #9e1620, 0 6px 14px rgba(158, 22, 32, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3); } @media (prefers-reduced-motion: reduce) { .btn-game { transition: none; } } /* ---- Circular glossy icon buttons (pause / sound) ---- */ .game-controls { position: fixed; top: 118px; right: 14px; z-index: 150; display: flex; flex-direction: column; gap: 12px; } .game-icon-btn { width: 48px; height: 48px; border-radius: 50%; border: 3px solid #ffffff; background: linear-gradient(180deg, #5b9a88 0%, #3b6b5e 55%, #2d5247 100%); color: #fff; font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 5px 0 #244a40, 0 9px 16px rgba(36, 74, 64, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35); transition: transform 0.16s cubic-bezier(0.18, 0.89, 0.32, 1.28), box-shadow 0.18s ease; } .game-icon-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #244a40, 0 12px 20px rgba(36, 74, 64, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.45); } .game-icon-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #244a40, 0 5px 12px rgba(36, 74, 64, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.25); } .game-icon-btn.is-muted { background: linear-gradient(180deg, #9aa6a2 0%, #6c7a75 55%, #515c58 100%); box-shadow: 0 5px 0 #44504c, 0 9px 16px rgba(68, 80, 76, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3); } @media (max-width: 480px) { .game-icon-btn { width: 44px; height: 44px; font-size: 1rem; } } /* ---- "NEW BEST!" sticker on Game Over ---- */ .new-best-badge { display: inline-block; margin: 2px 0 10px; padding: 6px 18px; border-radius: 999px; font-weight: 900; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; color: #7a4a00; background: linear-gradient(180deg, #ffe14d 0%, #ffc21e 100%); border: 2.5px solid #ffffff; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 4px 0 #d4870a, 0 8px 16px rgba(212, 135, 10, 0.4); animation: newBestPop 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) both; } @keyframes newBestPop { 0% { transform: scale(0.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.12) rotate(2deg); } 100% { transform: scale(1) rotate(-2deg); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .new-best-badge { animation: none; } } /* ---- Coins display + reward ---- */ .game-coins-row { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 14px; padding: 7px 18px; border-radius: 999px; font-weight: 900; color: #7a4a00; background: linear-gradient(180deg, #fff3cf 0%, #ffe49a 100%); border: 2.5px solid #ffffff; box-shadow: 0 3px 0 rgba(212, 135, 10, 0.35), 0 6px 14px rgba(212, 135, 10, 0.25); } .game-coins-row i { color: #ffb01e; } .coins-earned-line { font-weight: 800; color: #b07d12; margin: 4px 0 14px; } .coins-earned-line i { color: #ffb01e; } /* ---- Skin picker ---- */ .skin-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 280px; margin: 0 auto 18px; } .skin-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 4px 8px; border-radius: 18px; cursor: pointer; border: 3px solid #dfe7e4; background: linear-gradient(180deg, #ffffff 0%, #eef3f1 100%); transition: transform 0.16s cubic-bezier(0.18, 0.89, 0.32, 1.28), border-color 0.2s ease, box-shadow 0.2s ease; } .skin-cell:hover { transform: translateY(-2px); } .skin-cell .skin-face { font-size: 1.9rem; line-height: 1; } .skin-cell.is-locked { filter: grayscale(0.55); opacity: 0.92; } .skin-cell.is-selected { border-color: #34c24a; background: linear-gradient(180deg, #eafff0 0%, #d6ffe1 100%); box-shadow: 0 4px 0 rgba(21, 122, 44, 0.3), 0 8px 16px rgba(21, 122, 44, 0.2); } .skin-tag { font-size: 0.66rem; font-weight: 900; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .skin-tag--sel { background: #34c24a; color: #fff; font-size: 0.8rem; padding: 1px 9px; } .skin-tag--use { background: #3b6b5e; color: #fff; } .skin-tag--cost { background: #fff3cf; color: #7a4a00; border: 1px solid #ffd874; } .skin-cell.shake { animation: skinShake 0.4s ease; } @keyframes skinShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .skin-cell.shake { animation: none; } } /* ---- Settings gear on the start-menu card ---- */ .game-menu-gear { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #ffffff; background: linear-gradient(180deg, #5b9a88 0%, #3b6b5e 55%, #2d5247 100%); color: #fff; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 #244a40, 0 7px 14px rgba(36, 74, 64, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35); transition: transform 0.16s cubic-bezier(0.18, 0.89, 0.32, 1.28); z-index: 2; } .game-menu-gear:hover { transform: translateY(-2px) rotate(20deg); } /* ---- Settings panel rows + toggle switches ---- */ .settings-list { display: flex; flex-direction: column; gap: 12px; max-width: 290px; margin: 8px auto 20px; } .settings-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; border-radius: 16px; border: 2.5px solid #cfe0f5; background: linear-gradient(180deg, #f3f9ff 0%, #e3eeff 100%); cursor: pointer; } .settings-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: #2d5247; font-size: 0.98rem; } .settings-label i { color: #3b6b5e; width: 20px; text-align: center; } .switch { position: relative; flex: 0 0 auto; width: 52px; height: 28px; border-radius: 999px; background: #c2ccc9; border: 2px solid #ffffff; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22); transition: background 0.2s ease; } .switch-knob { position: absolute; top: 50%; left: 3px; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: left 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28); } .settings-row[aria-checked="true"] .switch { background: linear-gradient(180deg, #6fe06a 0%, #34c24a 100%); } .settings-row[aria-checked="true"] .switch-knob { left: 27px; } @media (prefers-reduced-motion: reduce) { .switch-knob { transition: none; } } /* ---- "x2 Coins" reward button (orange, rewarded-style) ---- */ .btn-game--reward { background: linear-gradient(180deg, #ffd23d 0%, #ffae18 50%, #ff7a1f 100%); color: #7a3b00; box-shadow: 0 6px 0 #d4710a, 0 12px 22px rgba(214, 113, 10, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.6); } .btn-game--reward:hover { box-shadow: 0 9px 0 #d4710a, 0 18px 30px rgba(214, 113, 10, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.7); } .btn-game--reward:active { box-shadow: 0 2px 0 #d4710a, 0 6px 14px rgba(214, 113, 10, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.45); } .btn-game--reward.is-used { filter: grayscale(0.6); opacity: 0.55; cursor: default; } /* ---- Install (Add to Home Screen) button + iOS hint ---- */ .btn-game--install { background: linear-gradient(180deg, #4da6ff 0%, #2e7ce0 55%, #1f5fc0 100%); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 6px 0 #184c9c, 0 12px 22px rgba(24, 76, 156, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4); } .btn-game--install:hover { box-shadow: 0 9px 0 #184c9c, 0 18px 30px rgba(24, 76, 156, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.5); } .btn-game--install:active { box-shadow: 0 2px 0 #184c9c, 0 6px 14px rgba(24, 76, 156, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3); } .ios-install-hint { margin: 6px auto 4px; max-width: 260px; font-size: 0.85rem; font-weight: 700; color: #2d5247; background: rgba(59, 107, 94, 0.1); border-radius: 12px; padding: 8px 12px; } .ios-install-hint i { color: #2e7ce0; } /* ---- First-time tap onboarding hint ---- */ .tap-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 60; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transition: opacity 0.3s ease; } .tap-hint.is-hiding { opacity: 0; } .tap-hint-hand { font-size: 3.4rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); animation: tapHintBob 1.1s ease-in-out infinite; } .tap-hint-text { font-weight: 900; color: #ffffff; background: linear-gradient(180deg, #8d63ff 0%, #6a3df0 100%); border: 3px solid #ffffff; border-radius: 999px; padding: 8px 18px; font-size: 0.95rem; text-shadow: 0 2px 0 rgba(58, 28, 138, 0.45); box-shadow: 0 4px 0 rgba(74, 40, 160, 0.5), 0 8px 18px rgba(0, 0, 0, 0.28); } @keyframes tapHintBob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(10px) scale(0.92); } } @media (prefers-reduced-motion: reduce) { .tap-hint-hand { animation: none; } } .controls-info { margin-top: 16px; padding: 12px; background: rgba(59, 107, 94, 0.1); border-radius: 10px; font-size: 0.88rem; color: #444; } /* The menu cards are always white, so keep their text dark even in dark mode (overrides the global body.dark-mode heading/paragraph colors). */ body.dark-mode .game-menu h1 { color: var(--brand-teal, #3b6b5e); } body.dark-mode .game-menu h2 { color: #ffffff; } body.dark-mode .game-menu p, body.dark-mode .game-menu .controls-info, body.dark-mode .game-menu .controls-info p { color: #555; } .game-over { display: none; } .game-over.show { display: block; } .final-score { font-size: 1.9rem; font-weight: 900; margin: 12px 0; background: linear-gradient(180deg, #ffc21e 0%, #ff8a00 60%, #ff6a1f 100%); -webkit-background-clip: text; background-clip: text; color: #ff8a00; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px #ffffff; paint-order: stroke fill; filter: drop-shadow(0 2px 0 rgba(193, 78, 0, 0.4)); } .game-case-study-link { display: inline-block; margin-top: 12px; font-size: 0.9rem; color: var(--brand-teal, #3b6b5e); }