Joel Brock
b5499bd618
Vanilla HTML/CSS/JS Tamagotchi-style game with three species (green, loggerhead, leatherback), persistent idle progression, hazard QTEs (sharks, boats, ghost nets, tourists), and offline PWA support via service worker. Includes README with cited conservation resources and research.
1994 lines
48 KiB
CSS
1994 lines
48 KiB
CSS
/* ==========================================================================
|
|
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); }
|
|
}
|