Joel Brock
f85a6fb9b7
- Remove package.json / package-lock.json. The only dependency was claude-flow (dev tooling, never loaded by the game), which pulled in 49 known vulnerabilities (2 critical, 28 high) and could be installed by the Cloudflare Pages build. - Self-host the Outfit variable font (latin + latin-ext woff2, SIL OFL) in fonts/ instead of loading it from Google Fonts. This removes the last third-party origins from the CSP (style-src / font-src are now 'self' only), stops sending visitor IPs to Google, and makes the font work offline. - Precache the font files in the service worker and bump CACHE_NAME to tortugotchi-v18.
2016 lines
49 KiB
CSS
2016 lines
49 KiB
CSS
/* ==========================================================================
|
|
FONTS — self-hosted Outfit variable font (SIL OFL 1.1, see fonts/OFL.txt)
|
|
========================================================================== */
|
|
/* latin-ext */
|
|
@font-face {
|
|
font-family: 'Outfit';
|
|
font-style: normal;
|
|
font-weight: 400 800;
|
|
font-display: swap;
|
|
src: url('fonts/outfit-latin-ext.woff2') format('woff2');
|
|
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
/* latin */
|
|
@font-face {
|
|
font-family: 'Outfit';
|
|
font-style: normal;
|
|
font-weight: 400 800;
|
|
font-display: swap;
|
|
src: url('fonts/outfit-latin.woff2') format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
DESIGN TOKENS & SYSTEM ROOT
|
|
========================================================================== */
|
|
:root {
|
|
--font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
|
/* Color Palette */
|
|
--color-bg-dark: #070b12;
|
|
--color-bg-light: #16222f;
|
|
|
|
--color-primary: #00b4d8;
|
|
--color-primary-dark: #0077b6;
|
|
--color-secondary: #52b788;
|
|
--color-accent: #e9c46a;
|
|
|
|
--color-danger: #ff5c8a;
|
|
--color-danger-dark: #ff0054;
|
|
--color-warning: #f4a261;
|
|
--color-warning-dark: #e76f51;
|
|
|
|
--color-text: #f8f9fa;
|
|
--color-text-muted: #a0aec0;
|
|
|
|
/* Glassmorphism */
|
|
--glass-bg: rgba(22, 34, 47, 0.7);
|
|
--glass-bg-accent: rgba(0, 180, 216, 0.1);
|
|
--glass-border: rgba(255, 255, 255, 0.08);
|
|
--glass-border-accent: rgba(0, 180, 216, 0.3);
|
|
--glass-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.4);
|
|
--glass-blur: blur(12px) saturate(180%);
|
|
|
|
/* Animation Timers */
|
|
--transition-speed: 0.3s;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
BASE & LAYOUT STYLES (MOBILE-FIRST FRAME)
|
|
========================================================================== */
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-tap-highlight-color: transparent;
|
|
user-select: none;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-primary);
|
|
background-color: var(--color-bg-dark);
|
|
color: var(--color-text);
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
|
}
|
|
|
|
/* Standard Mobile Frame on Desktop, full screen on Mobile */
|
|
.app-frame {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 480px;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
background-color: var(--color-bg-dark);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
|
|
border-left: 1px solid rgba(255, 255, 255, 0.05);
|
|
border-right: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
@media (min-width: 481px) {
|
|
.app-frame {
|
|
height: 90vh;
|
|
max-height: 850px;
|
|
border-radius: 28px;
|
|
border: 2px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
GAME SCREENS STRUCTURE
|
|
========================================================================== */
|
|
.game-screen {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: none;
|
|
flex-direction: column;
|
|
opacity: 0;
|
|
transition: opacity var(--transition-speed) ease-in-out;
|
|
z-index: 1;
|
|
}
|
|
|
|
.game-screen.active {
|
|
display: flex;
|
|
opacity: 1;
|
|
z-index: 10;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
GLASSMORPHISM & GENERAL STYLES
|
|
========================================================================== */
|
|
.glass-panel {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: var(--glass-blur);
|
|
-webkit-backdrop-filter: var(--glass-blur);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 20px;
|
|
box-shadow: var(--glass-shadow);
|
|
padding: 20px;
|
|
}
|
|
|
|
.text-center { text-align: center; }
|
|
.text-accent { color: var(--color-accent); }
|
|
.text-success { color: var(--color-secondary); }
|
|
.text-danger { color: var(--color-danger); }
|
|
.text-warning { color: var(--color-warning); }
|
|
.text-white { color: #ffffff; }
|
|
|
|
/* Buttons */
|
|
button {
|
|
font-family: var(--font-primary);
|
|
font-weight: 600;
|
|
border: none;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
|
|
color: #ffffff;
|
|
padding: 14px 28px;
|
|
border-radius: 12px;
|
|
font-size: 1.1rem;
|
|
box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
box-shadow: 0 6px 20px rgba(0, 180, 216, 0.5);
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.btn-primary-mini {
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
|
|
color: #ffffff;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.btn-secondary-text {
|
|
background: transparent;
|
|
color: var(--color-primary);
|
|
font-size: 1rem;
|
|
padding: 10px;
|
|
}
|
|
|
|
.btn-text {
|
|
background: transparent;
|
|
color: var(--color-text-muted);
|
|
font-size: 0.9rem;
|
|
padding: 5px;
|
|
}
|
|
|
|
.btn-close-text {
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
font-size: 1.5rem;
|
|
border-radius: 50%;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-close-text:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.btn-pulse {
|
|
animation: pulse-button 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse-button {
|
|
0% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3); }
|
|
50% { transform: scale(1.03); box-shadow: 0 4px 25px rgba(0, 180, 216, 0.6); }
|
|
100% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3); }
|
|
}
|
|
|
|
/* Screen HUD general */
|
|
.screen-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20px 20px 15px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.hud-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hud-label {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.hud-value {
|
|
font-size: 1.2rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
1. START / ONBOARDING SCREEN STYLING
|
|
========================================================================== */
|
|
#screen-start {
|
|
background: linear-gradient(135deg, #0b132b, #1c2541, #070b12);
|
|
justify-content: space-between;
|
|
padding: 40px 20px 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.header-logo {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.logo-turtle-svg {
|
|
width: 90px;
|
|
height: 90px;
|
|
animation: logo-swim 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes logo-swim {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-8px) rotate(3deg); }
|
|
}
|
|
|
|
.app-title {
|
|
font-size: 2.2rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, var(--color-text), var(--color-primary));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.app-subtitle {
|
|
font-size: 0.95rem;
|
|
color: var(--color-primary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.onboard-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.intro-text {
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.intro-action {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.species-selector {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.species-option input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.species-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 12px 15px;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
transition: all var(--transition-speed) ease;
|
|
}
|
|
|
|
.species-icon {
|
|
font-size: 1.8rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 10px;
|
|
width: 44px;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all var(--transition-speed) ease;
|
|
}
|
|
|
|
.species-details h3 {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.species-diet {
|
|
font-size: 0.75rem;
|
|
color: var(--color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.species-desc {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-muted);
|
|
line-height: 1.3;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Checked styling for Species Selection */
|
|
.species-option input[type="radio"]:checked + .species-card {
|
|
background: var(--glass-bg-accent);
|
|
border-color: var(--glass-border-accent);
|
|
}
|
|
|
|
.species-option input[type="radio"]:checked + .species-card .species-icon {
|
|
background: var(--color-primary);
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
2. BEACH & NEST STAGE STYLING
|
|
========================================================================== */
|
|
#screen-beach {
|
|
background: linear-gradient(to bottom, #070913 0%, #16182c 40%, #2f2a41 80%, #6e483b 100%);
|
|
}
|
|
|
|
.beach-area {
|
|
position: relative;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
/* Sandy shore look */
|
|
background: radial-gradient(circle at bottom, #b48a6a 0%, #3e334a 100%);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Old simple wave bar replaced by .tide-layer SVG; keep keyframe for legacy refs */
|
|
@keyframes beach-wave {
|
|
0% { transform: translateY(-5px) scaleY(0.9); opacity: 0.7; }
|
|
100% { transform: translateY(5px) scaleY(1.1); opacity: 0.9; }
|
|
}
|
|
|
|
/* Nest */
|
|
.nest-site {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
z-index: 5;
|
|
}
|
|
|
|
.nest-mound {
|
|
width: 80px;
|
|
height: 35px;
|
|
background: #926d52;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 3px 10px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.3);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.nest-label {
|
|
font-size: 0.65rem;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-weight: 800;
|
|
letter-spacing: 0.1em;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.eggs-visual {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 2px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.egg {
|
|
width: 14px;
|
|
height: 16px;
|
|
background: #fdfdfd;
|
|
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
|
box-shadow: inset -2px -2px 4px rgba(0,0,0,0.1), 1px 1px 2px rgba(0,0,0,0.2);
|
|
transform: rotate(15deg);
|
|
}
|
|
|
|
.egg:nth-child(2) { transform: rotate(-25deg) translate(3px, -3px); }
|
|
.egg:nth-child(3) { transform: rotate(5deg) translate(-3px, 2px); }
|
|
|
|
/* Beach Trash Can Zone */
|
|
.beach-trash-can-zone {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 50%;
|
|
background: var(--glass-bg);
|
|
border: 2px dashed rgba(255, 255, 255, 0.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
box-shadow: var(--glass-shadow);
|
|
transition: all var(--transition-speed) ease;
|
|
}
|
|
|
|
.beach-trash-can-zone.drag-hover {
|
|
transform: scale(1.15);
|
|
border-color: var(--color-secondary);
|
|
background: rgba(82, 183, 136, 0.15);
|
|
}
|
|
|
|
.trash-icon { font-size: 1.4rem; }
|
|
.trash-label { font-size: 0.6rem; color: var(--color-text-muted); font-weight: 600; text-align: center; }
|
|
|
|
/* Beach tutorial and feedback */
|
|
.game-tutorial-bubble {
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 20px;
|
|
right: 20px;
|
|
background: rgba(11, 19, 43, 0.95);
|
|
border: 1px solid var(--glass-border-accent);
|
|
border-radius: 12px;
|
|
padding: 12px 15px;
|
|
z-index: 15;
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
animation: bounce-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% { transform: translateY(20px) scale(0.9); opacity: 0; }
|
|
100% { transform: translateY(0) scale(1); opacity: 1; }
|
|
}
|
|
|
|
.game-tutorial-bubble p {
|
|
font-size: 0.85rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.beach-footer {
|
|
padding: 20px;
|
|
border-radius: 20px 20px 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.progress-bar-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.progress-bar-label {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.progress-bar-bg {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
background: var(--color-primary);
|
|
transition: width 0.1s linear;
|
|
}
|
|
|
|
.progress-bar-fill.warning {
|
|
background: var(--color-warning);
|
|
}
|
|
|
|
.action-feedback-text {
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
min-height: 20px;
|
|
}
|
|
|
|
/* Light Pollution warnings */
|
|
.light-alert-card {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 20px;
|
|
right: 20px;
|
|
background: rgba(231, 111, 81, 0.95);
|
|
border-radius: 10px;
|
|
padding: 10px 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
z-index: 15;
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.light-warning-icon { font-size: 1.4rem; }
|
|
.light-warning-text h5 { font-size: 0.85rem; color: #ffffff; }
|
|
.light-warning-text p { font-size: 0.75rem; color: rgba(255,255,255,0.9); }
|
|
|
|
/* Draggable / Clickable Hazards */
|
|
.beach-trash-item {
|
|
position: absolute;
|
|
font-size: 1.8rem;
|
|
cursor: grab;
|
|
z-index: 8;
|
|
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
|
|
transition: transform 0.1s ease;
|
|
}
|
|
|
|
.beach-trash-item:active {
|
|
cursor: grabbing;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.beach-hole-item {
|
|
position: absolute;
|
|
width: 44px;
|
|
height: 25px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 2px solid #5a4231;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
|
|
cursor: pointer;
|
|
z-index: 7;
|
|
}
|
|
|
|
.beach-hole-item.filling {
|
|
transform: scale(0.6);
|
|
opacity: 0.5;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.beach-predator-item {
|
|
position: absolute;
|
|
font-size: 2rem;
|
|
cursor: pointer;
|
|
z-index: 9;
|
|
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.predator-scared {
|
|
transform: scale(1.4) translateY(-30px);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.beach-light-source {
|
|
position: absolute;
|
|
top: 60px;
|
|
width: 50px;
|
|
height: 90px;
|
|
cursor: pointer;
|
|
z-index: 8;
|
|
}
|
|
|
|
.light-pole {
|
|
position: absolute;
|
|
left: 22px;
|
|
top: 15px;
|
|
width: 6px;
|
|
height: 75px;
|
|
background: #334155;
|
|
}
|
|
|
|
.light-bulb {
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #fef08a;
|
|
box-shadow: 0 0 15px #fef08a;
|
|
}
|
|
|
|
.light-beam {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: -50px;
|
|
width: 150px;
|
|
height: 300px;
|
|
background: fill;
|
|
background: linear-gradient(to bottom, rgba(254, 240, 138, 0.4), transparent);
|
|
clip-path: polygon(33% 0%, 66% 0%, 100% 100%, 0% 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.beach-light-source.off .light-bulb {
|
|
background: #64748b;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.beach-light-source.off .light-beam {
|
|
display: none;
|
|
}
|
|
|
|
/* Hatchling crawling */
|
|
.hatchling-crawler {
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
pointer-events: none;
|
|
z-index: 6;
|
|
transition: left 0.1s linear, top 0.1s linear;
|
|
}
|
|
|
|
.hatchling-crawler-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
animation: hatchling-waddle 0.3s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes hatchling-waddle {
|
|
0% { transform: rotate(-5deg); }
|
|
100% { transform: rotate(5deg); }
|
|
}
|
|
|
|
/* ==========================================================================
|
|
3. OCEAN TAMAGOTCHI CARE STAGE STYLING
|
|
========================================================================== */
|
|
#screen-ocean {
|
|
background: linear-gradient(180deg, #102a43 0%, #014f86 40%, #012a4a 100%);
|
|
}
|
|
|
|
.ocean-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 20px 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.turtle-identity {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
#turtle-avatar-indicator {
|
|
font-size: 2rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
width: 46px;
|
|
height: 46px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.turtle-identity h2 {
|
|
font-size: 1.1rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.species-subtext {
|
|
font-size: 0.7rem;
|
|
color: var(--color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-edit-icon {
|
|
background: transparent;
|
|
font-size: 0.9rem;
|
|
opacity: 0.6;
|
|
padding: 5px;
|
|
}
|
|
|
|
.btn-edit-icon:hover { opacity: 1; }
|
|
|
|
.turtle-age-score {
|
|
text-align: right;
|
|
}
|
|
|
|
/* HUD Stat Bars */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
padding: 0 20px 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.stat-bar-card {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
border-radius: 12px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.stat-bar-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.stat-val {
|
|
color: var(--color-text);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.stat-progress-bg {
|
|
width: 100%;
|
|
height: 6px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat-progress-fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
transition: width var(--transition-speed) ease;
|
|
}
|
|
|
|
.stat-progress-fill.health { background: var(--color-danger); }
|
|
.stat-progress-fill.hunger { background: var(--color-primary); }
|
|
.stat-progress-fill.joy { background: var(--color-secondary); }
|
|
.stat-progress-fill.clean { background: var(--color-accent); }
|
|
|
|
/* Playpen Area */
|
|
.ocean-playpen-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ocean-area {
|
|
position: relative;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: radial-gradient(circle at center, rgba(1, 79, 134, 0.5) 0%, rgba(1, 42, 74, 0.8) 100%);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Light rays from top */
|
|
.ocean-light-rays {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 20px, transparent 20px, transparent 40px),
|
|
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 20px, transparent 20px, transparent 40px);
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
animation: ray-shimmer 15s linear infinite;
|
|
}
|
|
|
|
@keyframes ray-shimmer {
|
|
0% { transform: scale(1.0) rotate(0deg); }
|
|
50% { transform: scale(1.1) rotate(2deg); }
|
|
100% { transform: scale(1.0) rotate(0deg); }
|
|
}
|
|
|
|
/* Water floating dust */
|
|
.ocean-water-particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Sea Turtle SVG Container & Animations */
|
|
.sea-turtle-sprite {
|
|
width: 180px;
|
|
height: 180px;
|
|
z-index: 5;
|
|
filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.5));
|
|
animation: swim-body 5s ease-in-out infinite;
|
|
transform-origin: center center;
|
|
transition: transform 0.5s ease-in-out;
|
|
}
|
|
|
|
/* Keyframes for full body movement */
|
|
@keyframes swim-body {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
33% { transform: translateY(-10px) rotate(1deg); }
|
|
66% { transform: translateY(8px) rotate(-1deg); }
|
|
}
|
|
|
|
/* Flippers animation */
|
|
.fl-left {
|
|
transform-origin: 60px 100px;
|
|
animation: swim-flipper-l 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
.fl-right {
|
|
transform-origin: 140px 100px;
|
|
animation: swim-flipper-r 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
.fl-back-left {
|
|
transform-origin: 80px 150px;
|
|
animation: steer-flipper-l 5s ease-in-out infinite;
|
|
}
|
|
|
|
.fl-back-right {
|
|
transform-origin: 120px 150px;
|
|
animation: steer-flipper-r 5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes swim-flipper-l {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
50% { transform: rotate(-25deg) translateY(-2px); }
|
|
}
|
|
|
|
@keyframes swim-flipper-r {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
50% { transform: rotate(25deg) translateY(-2px); }
|
|
}
|
|
|
|
@keyframes steer-flipper-l {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
50% { transform: rotate(10deg); }
|
|
}
|
|
|
|
@keyframes steer-flipper-r {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
50% { transform: rotate(-10deg); }
|
|
}
|
|
|
|
/* Thought bubble */
|
|
.thought-bubble {
|
|
position: absolute;
|
|
top: 30px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
color: #121212;
|
|
border-radius: 15px;
|
|
padding: 8px 15px;
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
animation: float-bubble 4s ease-in-out infinite;
|
|
}
|
|
|
|
.thought-bubble::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
width: 12px;
|
|
height: 12px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
@keyframes float-bubble {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-5px); }
|
|
}
|
|
|
|
/* Dialog screens shake for damage */
|
|
.shake-element {
|
|
animation: screen-shake 0.4s ease-in-out;
|
|
}
|
|
|
|
@keyframes screen-shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
20%, 60% { transform: translateX(-8px); }
|
|
40%, 80% { transform: translateX(8px); }
|
|
}
|
|
|
|
/* Floating food or trash items in the ocean */
|
|
.floating-item {
|
|
position: absolute;
|
|
font-size: 2rem;
|
|
cursor: pointer;
|
|
z-index: 6;
|
|
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
|
|
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
.floating-item.eating {
|
|
transform: scale(0.1) rotate(180deg);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Shell Cleaning Game overlay */
|
|
.cleaning-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 79, 134, 0.2);
|
|
z-index: 8;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.cleaning-instructions {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 20px;
|
|
right: 20px;
|
|
text-align: center;
|
|
background: rgba(11, 19, 43, 0.85);
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.interactive-brush {
|
|
position: absolute;
|
|
width: 64px;
|
|
height: 36px;
|
|
background: var(--color-accent);
|
|
color: #121212;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
cursor: grab;
|
|
z-index: 10;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
|
|
touch-action: none;
|
|
}
|
|
|
|
.interactive-brush:active { cursor: grabbing; }
|
|
|
|
/* QTE overlays (Nets, Boats, Sharks) */
|
|
.qte-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(19, 15, 38, 0.85);
|
|
z-index: 9;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.qte-warning-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 800;
|
|
color: var(--color-danger);
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
animation: flash-red 1s infinite alternate;
|
|
}
|
|
|
|
@keyframes flash-red {
|
|
0% { text-shadow: 0 0 5px rgba(255,92,138,0.2); }
|
|
100% { text-shadow: 0 0 20px rgba(255,92,138,0.9); }
|
|
}
|
|
|
|
.qte-instructions {
|
|
font-size: 0.9rem;
|
|
color: var(--color-text-muted);
|
|
margin-bottom: 20px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.swipe-progress-container {
|
|
width: 80%;
|
|
height: 12px;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.swipe-progress-fill {
|
|
height: 100%;
|
|
background: var(--color-secondary);
|
|
transition: width 0.1s ease;
|
|
}
|
|
|
|
.net-grid-graphics {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-large {
|
|
padding: 16px 32px;
|
|
font-size: 1.2rem;
|
|
border-radius: 16px;
|
|
width: 80%;
|
|
}
|
|
|
|
.shark-btn-row {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.shark-graphic {
|
|
position: absolute;
|
|
font-size: 4.5rem;
|
|
z-index: 2;
|
|
transition: left 0.1s linear, top 0.1s linear;
|
|
animation: shark-swim-anim 1.5s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes shark-swim-anim {
|
|
0% { transform: scaleX(-1) rotate(-3deg); }
|
|
100% { transform: scaleX(-1) rotate(3deg); }
|
|
}
|
|
|
|
/* Ocean Footer Drawer Controls */
|
|
.ocean-footer {
|
|
padding: 15px 20px;
|
|
border-radius: 20px 20px 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.button-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
height: 70px;
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
color: var(--color-text);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.action-btn:hover, .action-btn.active {
|
|
background: var(--glass-bg-accent);
|
|
border-color: var(--glass-border-accent);
|
|
}
|
|
|
|
.btn-emoji { font-size: 1.5rem; }
|
|
.btn-lbl { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); }
|
|
.action-btn:hover .btn-lbl, .action-btn.active .btn-lbl { color: var(--color-text); }
|
|
|
|
.drawer-panel {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
animation: slide-up-drawer 0.25s ease-out;
|
|
}
|
|
|
|
@keyframes slide-up-drawer {
|
|
0% { transform: translateY(10px); opacity: 0; }
|
|
100% { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.drawer-panel h4 {
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.food-options-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.food-btn {
|
|
flex: 1;
|
|
padding: 10px;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
color: var(--color-text);
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.food-btn:hover {
|
|
background: var(--color-primary-dark);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.drawer-warning {
|
|
font-size: 0.7rem;
|
|
color: var(--color-warning);
|
|
text-align: center;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
4. BEACHING / TOURIST SHIELD EVENT STYLING
|
|
========================================================================== */
|
|
#screen-beaching {
|
|
background: linear-gradient(180deg, #1c2a38 0%, #3e5066 40%, #c49a75 100%);
|
|
}
|
|
|
|
.warning-bg {
|
|
background: linear-gradient(90deg, #9b2c2c, #742a2a);
|
|
}
|
|
|
|
.beaching-area {
|
|
position: relative;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
background: radial-gradient(circle at center, #d8b28f 0%, #a77c57 100%);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.beached-turtle-resting {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 140px;
|
|
height: 140px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 5;
|
|
}
|
|
|
|
.resting-turtle-svg {
|
|
width: 90px;
|
|
height: 90px;
|
|
animation: resting-breathing 4s ease-in-out infinite;
|
|
}
|
|
|
|
/* Very slow, calm breathing — sea turtles rest motionless on the sand */
|
|
.resting-turtle-svg {
|
|
animation: resting-breathing 9s ease-in-out infinite !important;
|
|
}
|
|
@keyframes resting-breathing {
|
|
0%, 100% { transform: scale(1.0) translateY(0); }
|
|
50% { transform: scale(1.035) translateY(-1px); }
|
|
}
|
|
|
|
/* 10-foot boundary rings */
|
|
.turtle-zone-ring {
|
|
position: absolute;
|
|
width: 180px;
|
|
height: 180px;
|
|
border-radius: 50%;
|
|
border: 3px dashed rgba(229, 62, 62, 0.6);
|
|
background: rgba(229, 62, 62, 0.05);
|
|
animation: pulse-ring 2s infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes pulse-ring {
|
|
0% { transform: scale(0.95); opacity: 0.5; }
|
|
50% { transform: scale(1.05); opacity: 0.8; }
|
|
100% { transform: scale(0.95); opacity: 0.5; }
|
|
}
|
|
|
|
.safe-zone-label {
|
|
position: absolute;
|
|
top: -24px;
|
|
width: 150px;
|
|
text-align: center;
|
|
background: rgba(229, 62, 62, 0.9);
|
|
color: #ffffff;
|
|
font-size: 0.6rem;
|
|
font-weight: 800;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
letter-spacing: 0.05em;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Tourist Sprites */
|
|
.tourist-sprite {
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
z-index: 7;
|
|
transition: left 0.1s linear, top 0.1s linear, transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
|
}
|
|
|
|
.tourist-avatar {
|
|
font-size: 2.2rem;
|
|
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
|
|
}
|
|
|
|
.tourist-camera-flash {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 20px 10px #ffffff;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.flash-active {
|
|
animation: flash-trigger 0.8s ease-out;
|
|
}
|
|
|
|
@keyframes flash-trigger {
|
|
0% { opacity: 0; transform: scale(0.5); }
|
|
10% { opacity: 1; transform: scale(1.5); }
|
|
25% { opacity: 0; }
|
|
50% { opacity: 1; transform: scale(1.5); }
|
|
65% { opacity: 0; }
|
|
}
|
|
|
|
.beaching-instructions-card {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 20px;
|
|
right: 20px;
|
|
background: rgba(11, 19, 43, 0.9);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
z-index: 10;
|
|
box-shadow: var(--glass-shadow);
|
|
text-align: center;
|
|
}
|
|
|
|
.beaching-instructions-card p {
|
|
font-size: 0.8rem;
|
|
line-height: 1.4;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.beaching-footer {
|
|
padding: 20px;
|
|
border-radius: 20px 20px 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.educational-pop-box {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-left: 4px solid var(--color-primary);
|
|
padding: 8px 12px;
|
|
border-radius: 0 8px 8px 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
min-height: 52px;
|
|
}
|
|
|
|
.fact-icon { font-size: 1.2rem; }
|
|
.fact-text { font-size: 0.75rem; line-height: 1.4; color: var(--color-text); }
|
|
|
|
/* ==========================================================================
|
|
MODALS AND OVERLAYS
|
|
========================================================================== */
|
|
.modal-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.modal-card {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow: 0 20px 50px rgba(0,0,0,0.6);
|
|
animation: modal-zoom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
@keyframes modal-zoom {
|
|
0% { transform: scale(0.9); opacity: 0; }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
.small-modal {
|
|
max-height: 350px;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.modal-header h2 {
|
|
font-size: 1.2rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.modal-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.scrollable-content {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
/* Custom Scrollbar for Modal content */
|
|
.scrollable-content::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.scrollable-content::-webkit-scrollbar-track {
|
|
background: rgba(255,255,255,0.02);
|
|
}
|
|
.scrollable-content::-webkit-scrollbar-thumb {
|
|
background: var(--color-primary);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.modal-body h3 {
|
|
font-size: 0.95rem;
|
|
color: var(--color-primary);
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.modal-body p {
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-muted);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.citation-box {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 8px;
|
|
padding: 8px 10px;
|
|
margin-top: 10px;
|
|
border: 1px dashed rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.citation-box p {
|
|
font-size: 0.7rem;
|
|
color: var(--color-primary);
|
|
text-align: center;
|
|
}
|
|
|
|
.text-input {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
color: #ffffff;
|
|
font-size: 1rem;
|
|
font-family: var(--font-primary);
|
|
width: 100%;
|
|
}
|
|
|
|
.text-input:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.modal-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.gameover-stats {
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.gameover-stats p {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* PWA Installer banner */
|
|
.install-banner {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 90%;
|
|
max-width: 440px;
|
|
background: rgba(22, 34, 47, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid var(--glass-border-accent);
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
padding: 12px 15px;
|
|
animation: slide-up-banner 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
|
}
|
|
|
|
@keyframes slide-up-banner {
|
|
0% { transform: translate(-50%, 50px); opacity: 0; }
|
|
100% { transform: translate(-50%, 0); opacity: 1; }
|
|
}
|
|
|
|
.banner-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.banner-icon {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.banner-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.banner-text h4 {
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.banner-text p {
|
|
font-size: 0.7rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
UTILITY STYLES FOR DYNAMIC SPANNING
|
|
========================================================================== */
|
|
.dirt-particle {
|
|
position: absolute;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
MIGRATION SUCCESS MODAL STYLING
|
|
========================================================================== */
|
|
.migration-results-card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
text-align: center;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
.migration-results-card p {
|
|
font-size: 0.95rem;
|
|
margin: 5px 0;
|
|
}
|
|
.conservation-trivia-card {
|
|
background: rgba(0, 180, 216, 0.08);
|
|
border-left: 4px solid var(--color-primary);
|
|
border-radius: 4px 12px 12px 4px;
|
|
padding: 12px 15px;
|
|
text-align: left;
|
|
}
|
|
.conservation-trivia-card h3 {
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
margin-bottom: 5px;
|
|
color: var(--color-primary);
|
|
}
|
|
.conservation-trivia-card p {
|
|
font-size: 0.8rem;
|
|
line-height: 1.4;
|
|
color: var(--color-text-muted);
|
|
}
|
|
.bonus-box {
|
|
background: rgba(82, 183, 136, 0.1);
|
|
border: 1px solid rgba(82, 183, 136, 0.2);
|
|
border-radius: 12px;
|
|
padding: 12px 15px;
|
|
text-align: left;
|
|
color: #fff;
|
|
}
|
|
.bonus-box h4 {
|
|
color: var(--color-secondary);
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
.bonus-box p {
|
|
font-size: 0.8rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* ============================================
|
|
FEEDING — tap-to-feed visual cues
|
|
============================================ */
|
|
.floating-item.food-item {
|
|
cursor: grab;
|
|
animation: food-tap-hint 1.6s ease-in-out infinite;
|
|
filter: drop-shadow(0 0 8px rgba(255, 255, 200, 0.7)) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
|
|
}
|
|
.floating-item.food-item:hover,
|
|
.floating-item.food-item:active {
|
|
transform: scale(1.2);
|
|
filter: drop-shadow(0 0 14px rgba(255, 255, 200, 1)) drop-shadow(0 4px 8px rgba(0,0,0,0.4));
|
|
}
|
|
.floating-item.food-item.chasing {
|
|
pointer-events: none;
|
|
filter: drop-shadow(0 0 18px rgba(255, 230, 120, 1));
|
|
}
|
|
@keyframes food-tap-hint {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.08); }
|
|
}
|
|
|
|
/* ============================================
|
|
TURTLE — tickle/rub interactivity
|
|
============================================ */
|
|
.sea-turtle-sprite {
|
|
cursor: grab;
|
|
touch-action: none;
|
|
}
|
|
.sea-turtle-sprite:active {
|
|
cursor: grabbing;
|
|
}
|
|
.sea-turtle-sprite.being-tickled {
|
|
animation: tickle-wiggle 0.25s ease-in-out infinite, swim-body 5s ease-in-out infinite;
|
|
}
|
|
@keyframes tickle-wiggle {
|
|
0%, 100% { transform: translateX(0) rotate(0); }
|
|
25% { transform: translateX(-4px) rotate(-3deg); }
|
|
75% { transform: translateX(4px) rotate(3deg); }
|
|
}
|
|
|
|
.tickle-heart {
|
|
position: absolute;
|
|
font-size: 1.4rem;
|
|
pointer-events: none;
|
|
z-index: 20;
|
|
animation: heart-float 0.9s ease-out forwards;
|
|
}
|
|
@keyframes heart-float {
|
|
0% { transform: translateY(0) scale(0.5); opacity: 0; }
|
|
20% { transform: translateY(-10px) scale(1.2); opacity: 1; }
|
|
100% { transform: translateY(-50px) scale(0.8); opacity: 0; }
|
|
}
|
|
|
|
/* ============================================
|
|
IDLE BEHAVIORS — flap, roll, look around
|
|
============================================ */
|
|
.sea-turtle-sprite.idle-flap {
|
|
animation: idle-flap-anim 1.2s ease-in-out, swim-body 5s ease-in-out infinite;
|
|
}
|
|
@keyframes idle-flap-anim {
|
|
0%, 100% { transform: translateY(0) rotate(0); }
|
|
25% { transform: translateY(-18px) rotate(-4deg); }
|
|
50% { transform: translateY(-8px) rotate(4deg); }
|
|
75% { transform: translateY(-22px) rotate(-2deg); }
|
|
}
|
|
|
|
.sea-turtle-sprite.idle-look {
|
|
animation: idle-look-anim 1.6s ease-in-out, swim-body 5s ease-in-out infinite;
|
|
}
|
|
@keyframes idle-look-anim {
|
|
0%, 100% { transform: rotate(0); }
|
|
30% { transform: rotate(-8deg); }
|
|
70% { transform: rotate(8deg); }
|
|
}
|
|
|
|
.sea-turtle-sprite.idle-roll {
|
|
animation: idle-roll-anim 1.4s ease-in-out, swim-body 5s ease-in-out infinite;
|
|
}
|
|
@keyframes idle-roll-anim {
|
|
0% { transform: rotate(0) scale(1); }
|
|
50% { transform: rotate(360deg) scale(1.05); }
|
|
100% { transform: rotate(720deg) scale(1); }
|
|
}
|
|
|
|
/* Bubbles emitted by turtle */
|
|
.turtle-bubble {
|
|
position: absolute;
|
|
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(180, 220, 255, 0.4));
|
|
border: 1px solid rgba(255,255,255,0.7);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 4;
|
|
animation: bubble-rise 2.2s ease-out forwards;
|
|
}
|
|
@keyframes bubble-rise {
|
|
0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
|
|
20% { opacity: 0.9; }
|
|
100% { transform: translate(var(--bx, 10px), -120px) scale(1.1); opacity: 0; }
|
|
}
|
|
|
|
.ambient-bubble {
|
|
position: absolute;
|
|
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), rgba(180, 220, 255, 0.2));
|
|
border: 1px solid rgba(255,255,255,0.35);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
animation: ambient-bubble-rise 5s linear forwards;
|
|
}
|
|
@keyframes ambient-bubble-rise {
|
|
0% { transform: translateY(0) translateX(0); opacity: 0; }
|
|
15% { opacity: 0.7; }
|
|
100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
|
|
}
|
|
|
|
/* ============================================
|
|
DYNAMIC LIQUID TIDE (beach + beaching scenes)
|
|
============================================ */
|
|
.tide-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 170px;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
.tide-layer.beaching-tide {
|
|
height: 210px;
|
|
/* slightly stronger color presence where water meets warm sand */
|
|
filter: saturate(1.15);
|
|
background: linear-gradient(to bottom, #0a4a72 0%, #1d7ab5 40%, transparent 100%);
|
|
}
|
|
/* Beach scene: water against night-sand backdrop */
|
|
#beach-sandbox > .tide-layer {
|
|
background: linear-gradient(to bottom, #0a3a63 0%, #1d7ab5 45%, transparent 100%);
|
|
}
|
|
.tide-svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -10%;
|
|
width: 220%; /* extra width allows horizontal drift without exposing edges */
|
|
height: 100%;
|
|
display: block;
|
|
/* Flip vertically so deep water sits at the TOP (under the banner) and
|
|
foam/crest meets the sand at the bottom of the tide layer */
|
|
transform: scaleY(-1);
|
|
transform-origin: center center;
|
|
}
|
|
|
|
/* Each wave layer drifts at its own speed for a liquid parallax look */
|
|
.tide-wave {
|
|
transform-origin: center;
|
|
will-change: transform;
|
|
}
|
|
.tide-back {
|
|
animation: tide-drift-slow 11s ease-in-out infinite alternate,
|
|
tide-bob 5s ease-in-out infinite;
|
|
}
|
|
.tide-mid {
|
|
animation: tide-drift-med 7s ease-in-out infinite alternate,
|
|
tide-bob 4s ease-in-out infinite reverse;
|
|
opacity: 0.85;
|
|
}
|
|
.tide-front {
|
|
animation: tide-drift-fast 4.5s ease-in-out infinite alternate,
|
|
tide-bob 3s ease-in-out infinite;
|
|
mix-blend-mode: screen;
|
|
}
|
|
.tide-foam {
|
|
animation: tide-foam-shimmer 2.8s ease-in-out infinite alternate,
|
|
tide-drift-fast 5s linear infinite alternate;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
@keyframes tide-drift-slow {
|
|
0% { transform: translateX(-4%); }
|
|
100% { transform: translateX(4%); }
|
|
}
|
|
@keyframes tide-drift-med {
|
|
0% { transform: translateX(3%); }
|
|
100% { transform: translateX(-5%); }
|
|
}
|
|
@keyframes tide-drift-fast {
|
|
0% { transform: translateX(-2%) translateY(0); }
|
|
100% { transform: translateX(5%) translateY(-2px); }
|
|
}
|
|
@keyframes tide-bob {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-4px); }
|
|
}
|
|
@keyframes tide-foam-shimmer {
|
|
0% { opacity: 0.55; }
|
|
50% { opacity: 0.95; }
|
|
100% { opacity: 0.7; }
|
|
}
|
|
|
|
/* Make sure nest/hazards float above tide */
|
|
.nest-site, .hazards-layer, .hatchlings-layer, .beach-trash-can-zone {
|
|
z-index: 5;
|
|
}
|
|
|
|
/* ============================================
|
|
PREDATOR ALERT + DEFENSIVE POSTURE (Ocean QTE)
|
|
============================================ */
|
|
.sea-turtle-sprite.predator-alert {
|
|
animation: predator-flinch 0.6s ease-in-out 2, swim-body 5s ease-in-out infinite;
|
|
filter: drop-shadow(0 0 16px rgba(255, 80, 80, 0.65)) drop-shadow(0 12px 25px rgba(0,0,0,0.5));
|
|
}
|
|
@keyframes predator-flinch {
|
|
0%, 100% { transform: translateY(0) rotate(0); }
|
|
20% { transform: translateY(-6px) rotate(-2deg); }
|
|
40% { transform: translateY(2px) rotate(3deg); }
|
|
60% { transform: translateY(-3px) rotate(-1deg); }
|
|
}
|
|
|
|
.sea-turtle-sprite.defensive-posture {
|
|
/* turtle stops swimming freely and angles shell toward threat (rotates slightly) */
|
|
animation: defensive-brace 0.5s ease-out forwards;
|
|
filter: drop-shadow(0 0 18px rgba(255, 200, 80, 0.6)) drop-shadow(0 12px 25px rgba(0,0,0,0.5));
|
|
}
|
|
@keyframes defensive-brace {
|
|
0% { transform: translateY(0) rotate(0) scale(1); }
|
|
100% { transform: translateY(4px) rotate(-8deg) scale(0.96); }
|
|
}
|
|
/* Freeze flipper paddling while braced — pulled in tight */
|
|
.sea-turtle-sprite.defensive-posture .flipper {
|
|
animation: none !important;
|
|
}
|
|
|
|
/* ============================================
|
|
GROWTH STAGES — turtle visibly grows with age
|
|
============================================ */
|
|
.sea-turtle-sprite.stage-hatchling { transform: scale(0.55); }
|
|
.sea-turtle-sprite.stage-juvenile { transform: scale(0.72); }
|
|
.sea-turtle-sprite.stage-subadult { transform: scale(0.88); }
|
|
.sea-turtle-sprite.stage-adult { transform: scale(1.05); }
|
|
.sea-turtle-sprite.stage-elder { transform: scale(1.18); filter: drop-shadow(0 12px 25px rgba(0,0,0,0.5)) sepia(0.12); }
|
|
|
|
/* Growth scale is preserved during interactive transforms by applying it via
|
|
a wrapper transform — re-establish so swim animations still compose. */
|
|
.sea-turtle-sprite[class*="stage-"] {
|
|
transform-origin: center center;
|
|
transition: transform 0.8s cubic-bezier(.45,.05,.55,.95), filter 0.8s ease;
|
|
}
|
|
|
|
/* ============================================
|
|
SPECIES PALETTES & TRAITS
|
|
============================================ */
|
|
/* GREEN SEA TURTLE — vibrant green grazer, smaller head */
|
|
.sea-turtle-sprite.species-green #turtle-shell ellipse { fill: #1b4332; stroke: #2d6a4f; }
|
|
.sea-turtle-sprite.species-green #turtle-shell path[fill="#40916c"] { fill: #40916c; }
|
|
.sea-turtle-sprite.species-green .flipper path { fill: #2d6a4f; }
|
|
.sea-turtle-sprite.species-green .fl-back-left path,
|
|
.sea-turtle-sprite.species-green .fl-back-right path { fill: #1b4332; }
|
|
.sea-turtle-sprite.species-green #turtle-head ellipse { fill: #2d6a4f; }
|
|
.sea-turtle-sprite.species-green #turtle-head path { fill: #2d6a4f; }
|
|
|
|
/* LOGGERHEAD — reddish-brown shell, oversized head, stockier */
|
|
.sea-turtle-sprite.species-loggerhead #turtle-shell ellipse:first-child {
|
|
fill: #6b3410; stroke: #8b4513;
|
|
}
|
|
.sea-turtle-sprite.species-loggerhead #turtle-shell path[fill="#40916c"] { fill: #a0522d; }
|
|
.sea-turtle-sprite.species-loggerhead #turtle-shell circle[fill="#52b788"] { fill: #cd853f; }
|
|
.sea-turtle-sprite.species-loggerhead .flipper path { fill: #8b4513; }
|
|
.sea-turtle-sprite.species-loggerhead .fl-back-left path,
|
|
.sea-turtle-sprite.species-loggerhead .fl-back-right path { fill: #6b3410; }
|
|
.sea-turtle-sprite.species-loggerhead #turtle-head ellipse {
|
|
fill: #8b4513;
|
|
/* signature oversized head */
|
|
transform: scale(1.25);
|
|
transform-origin: 100px 55px;
|
|
transform-box: fill-box;
|
|
}
|
|
.sea-turtle-sprite.species-loggerhead #turtle-head path { fill: #8b4513; }
|
|
.sea-turtle-sprite.species-loggerhead .flipper {
|
|
/* slower, more powerful strokes */
|
|
animation-duration: 3.4s !important;
|
|
}
|
|
|
|
/* LEATHERBACK — dark blue-gray, largest, with ridged shell stripes */
|
|
.sea-turtle-sprite.species-leatherback #turtle-shell ellipse:first-child {
|
|
fill: #1a1d2e; stroke: #2c3e50;
|
|
}
|
|
.sea-turtle-sprite.species-leatherback #turtle-shell path[fill="#40916c"] { fill: #2c3e50; }
|
|
.sea-turtle-sprite.species-leatherback #turtle-shell circle[fill="#52b788"] { fill: #4a6072; }
|
|
.sea-turtle-sprite.species-leatherback #turtle-shell path[stroke="#1b4332"] {
|
|
/* exaggerate the longitudinal ridges characteristic of leatherbacks */
|
|
stroke: #5b7a8c;
|
|
stroke-width: 4 !important;
|
|
}
|
|
.sea-turtle-sprite.species-leatherback .flipper path { fill: #2c3e50; }
|
|
.sea-turtle-sprite.species-leatherback .fl-back-left path,
|
|
.sea-turtle-sprite.species-leatherback .fl-back-right path { fill: #1a1d2e; }
|
|
.sea-turtle-sprite.species-leatherback #turtle-head ellipse { fill: #2c3e50; }
|
|
.sea-turtle-sprite.species-leatherback #turtle-head path { fill: #2c3e50; }
|
|
.sea-turtle-sprite.species-leatherback .flipper {
|
|
/* longer, gliding strokes — leatherbacks are deep-divers */
|
|
animation-duration: 3.8s !important;
|
|
}
|
|
.sea-turtle-sprite.species-leatherback {
|
|
/* additional size boost — leatherbacks are the largest sea turtles */
|
|
filter: drop-shadow(0 16px 28px rgba(0,0,0,0.55));
|
|
}
|
|
.sea-turtle-sprite.species-leatherback.stage-adult { transform: scale(1.18); }
|
|
.sea-turtle-sprite.species-leatherback.stage-elder { transform: scale(1.32); }
|
|
|
|
/* Quick visual cue for sickness — slight green tint */
|
|
.sea-turtle-sprite.sick { filter: drop-shadow(0 12px 25px rgba(0,0,0,0.5)) hue-rotate(40deg) saturate(0.7); }
|
|
|
|
/* ============================================
|
|
PLAYMATE — species-specific sea friend (Play action)
|
|
============================================ */
|
|
.sea-playmate {
|
|
position: absolute;
|
|
font-size: 2.2rem;
|
|
z-index: 7;
|
|
cursor: pointer;
|
|
filter: drop-shadow(0 0 12px rgba(255, 255, 200, 0.7)) drop-shadow(0 4px 8px rgba(0,0,0,0.35));
|
|
transition: filter 0.2s ease;
|
|
animation: playmate-wiggle 0.6s ease-in-out infinite;
|
|
pointer-events: auto;
|
|
will-change: transform, left, top;
|
|
}
|
|
.sea-playmate:hover { filter: drop-shadow(0 0 18px rgba(255,255,200,1)) drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
|
|
.sea-playmate.high-five {
|
|
animation: playmate-highfive 0.25s ease-out;
|
|
}
|
|
.sea-playmate.swimming-away {
|
|
animation: playmate-leave 1.2s ease-in forwards;
|
|
}
|
|
@keyframes playmate-wiggle {
|
|
0%, 100% { transform: translateY(0) rotate(-3deg); }
|
|
50% { transform: translateY(-4px) rotate(3deg); }
|
|
}
|
|
@keyframes playmate-highfive {
|
|
0% { transform: scale(1) rotate(0); }
|
|
50% { transform: scale(1.4) rotate(15deg); }
|
|
100% { transform: scale(1) rotate(0); }
|
|
}
|
|
@keyframes playmate-leave {
|
|
0% { opacity: 1; transform: scale(1); }
|
|
100% { opacity: 0; transform: scale(0.6) translateY(-30px); }
|
|
}
|
|
|
|
/* ============================================
|
|
GHOST NET — strand grid breaks as you cut
|
|
============================================ */
|
|
.net-grid-graphics {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(4, 1fr);
|
|
gap: 6px;
|
|
width: 220px;
|
|
height: 220px;
|
|
margin: 16px auto 0;
|
|
padding: 8px;
|
|
background:
|
|
repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0 2px, transparent 2px 12px),
|
|
repeating-linear-gradient(-45deg, rgba(255,255,255,0.15) 0 2px, transparent 2px 12px);
|
|
border: 2px solid rgba(255,255,255,0.4);
|
|
border-radius: 10px;
|
|
}
|
|
.net-grid-graphics.snapping {
|
|
animation: net-shake 0.35s ease-in-out infinite;
|
|
}
|
|
.net-strand {
|
|
display: block;
|
|
background: rgba(220, 220, 220, 0.85);
|
|
border: 1px solid rgba(0,0,0,0.35);
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 0 4px rgba(255,255,255,0.4);
|
|
transition: opacity 0.25s ease, transform 0.4s ease;
|
|
}
|
|
.net-strand.cut {
|
|
animation: strand-snap 0.4s ease-out forwards;
|
|
pointer-events: none;
|
|
}
|
|
@keyframes strand-snap {
|
|
0% { opacity: 1; transform: scale(1) rotate(0); }
|
|
40% { opacity: 0.9; transform: scale(1.15) rotate(8deg); background: #ffd166; }
|
|
100% { opacity: 0; transform: scale(0.4) rotate(-25deg) translateY(20px); }
|
|
}
|
|
@keyframes net-shake {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
25% { transform: translate(-3px, 2px); }
|
|
75% { transform: translate(3px, -2px); }
|
|
}
|
|
|
|
/* ============================================
|
|
SCREEN TRANSITIONS — fade + slide between scenes
|
|
============================================ */
|
|
.game-screen.screen-exit {
|
|
display: flex !important;
|
|
z-index: 9;
|
|
animation: screen-exit-anim 0.32s ease-in forwards;
|
|
pointer-events: none;
|
|
}
|
|
.game-screen.screen-enter {
|
|
animation: screen-enter-anim 0.55s cubic-bezier(.2,.7,.3,1) both;
|
|
}
|
|
@keyframes screen-exit-anim {
|
|
0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
|
|
100% { opacity: 0; transform: translateY(-18px) scale(0.985); filter: blur(4px); }
|
|
}
|
|
@keyframes screen-enter-anim {
|
|
0% { opacity: 0; transform: translateY(24px) scale(1.02); filter: blur(6px); }
|
|
60% { opacity: 1; filter: blur(0); }
|
|
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
|
|
}
|