@import url('/assets/fonts/exo2-local.css');

:root {
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--radius-xl: 28px;

	--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
	--shadow-md: 0 4px 8px rgba(0,0,0,0.15);
	--shadow-lg: 0 10px 25px rgba(0,0,0,0.2);
	--shadow-xl: 0 20px 40px rgba(0,0,0,0.3);

	--timing-fast: 150ms;
	--timing-base: 250ms;
	--timing-slow: 350ms;

	--z-canvas: 1;
	--z-content: 10;
	--z-overlay: 100;
	--z-modal: 1000;

	--status-height: 44px;
	--gesture-height: 0px;
	--app-icon-size: 90px;
	--app-label-height: 30px;
	--app-spacing: 24px;

	--folder-start-scale: 0.333; /* Desktop: 90px icon / 270px folder = 0.333 */
}

body[data-app="home"] {
	--bg-primary: #000000;
	--text-primary: #ffffff;
	--text-secondary: rgba(255,255,255,0.7);
}

body[data-app="me"] {
	--bg-primary: #1a1a2e;
	--text-primary: #eee;
	--accent: #f39c12;
}

body[data-app="naquatic"] {
	--bg-primary: #1a1a1e;
	--text-primary: #ffffff;
	--accent: #94dffc;
}

body[data-app="naquatic"] .app-container {
	/* Background goes on the container, unmasked */
	background-image: url('/assets/images/apps/naquatic-background.jpg');
	/* Fixed size - optimized for typical desktop viewing */
	background-size: 1260px auto;
	background-position: top center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	/* Dark blue-black background for any area not covered by the image */
	background-color: #000708;
}

body[data-app="naquatic"] .app-content {
	/* Transparent background to work with mask */
	background: transparent;

	/* Composite mask: image for top, white gradient for content below */
	/* Fixed mask size to match background - 1260px wide, mask is 10% of height */
	-webkit-mask-image:
		url('/assets/images/apps/naquatic-background-mask.jpg'),
		linear-gradient(to bottom, transparent 0, transparent 126px, white 126px, white 100%);
	mask-image:
		url('/assets/images/apps/naquatic-background-mask.jpg'),
		linear-gradient(to bottom, transparent 0, transparent 126px, white 126px, white 100%);
	/* Fixed mask size to match the background exactly */
	-webkit-mask-size: 1260px auto, 100% 100%;
	mask-size: 1260px auto, 100% 100%;
	/* Position them correctly */
	-webkit-mask-position: top center, center;
	mask-position: top center, center;
	/* No repeat */
	-webkit-mask-repeat: no-repeat, no-repeat;
	mask-repeat: no-repeat, no-repeat;
	/* CRITICAL: Luminance mode for the image */
	-webkit-mask-mode: luminance;
	mask-mode: luminance;
	/* Composite with add to combine both masks */
	-webkit-mask-composite: add;
	mask-composite: add;
}

body[data-app="naquatic"] .naquatic-content {
	padding-top: 150px;
	position: relative;
}

/* Naquatic-specific WOS status bar theming moved to wos.js */

/* Naquatic mobile styles moved to end of file for proper specificity */

body[data-app="volunteering"] {
	--bg-primary: #1a2e1f;
	--text-primary: #ffffff;
	--accent: #66bb6a;
}

body[data-app="toys"] {
	--bg-primary: #6a1b9a;
	--text-primary: #ffffff;
	--accent: #ba68c8;
}

body[data-app="games"] {
	--bg-primary: #37474f;
	--text-primary: #ffffff;
	--accent: #ff6b6b;
}

body[data-app="message"] {
	--bg-primary: #0277bd;
	--text-primary: #ffffff;
	--accent: #29b6f6;
}

body[data-app="linkedin"] {
	--bg-primary: #0077b5;
	--text-primary: #ffffff;
	--accent: #00a0dc;
}

body[data-app="settings"] {
	--bg-primary: #424242;
	--text-primary: #ffffff;
	--accent: #9e9e9e;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
	overflow: hidden;
	position: fixed;
	width: 100%;
	/* Eliminate browser-specific borders */
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	/* Disable zoom behaviors */
	touch-action: manipulation;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

/* Additional fixes for browser chrome borders */
html {
	/* Extend slightly beyond viewport to hide browser borders */
	width: 100vw;
	height: 100vh;
	/* Some browsers add borders at specific zoom levels */
	min-width: 100vw;
	min-height: 100vh;
	/* Ensure no gaps from sub-pixel rendering */
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
}

body {
	font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: var(--bg-primary, #000);
	color: var(--text-primary, #fff);
	transition: background-color var(--timing-base) ease;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Three-layer canvas system: sky/clouds, ocean, boat */
#skyCanvas, #oceanCanvas, #boatCanvas {
	position: fixed;
	top: -1px; /* Extend 1px beyond to cover any browser borders */
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	opacity: 1;
	transition: opacity var(--timing-slow) ease;
	pointer-events: none;
}

#skyCanvas {
	z-index: 0; /* Sky, clouds - bottom layer */
}

#oceanCanvas {
	z-index: 500; /* Ocean waves - in front of buttons/raindrops */
}

#boatCanvas {
	z-index: 600; /* Boat - frontmost layer */
}

body:not([data-app="home"]) #skyCanvas,
body:not([data-app="home"]) #oceanCanvas,
body:not([data-app="home"]) #boatCanvas {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	#skyCanvas, #oceanCanvas, #boatCanvas {
		display: none;
	}
}

body.reduced-motion #skyCanvas,
body.reduced-motion #oceanCanvas,
body.reduced-motion #boatCanvas {
	display: block;
}

body.reduced-motion .app-icon:hover,
body.reduced-motion .app-icon:active {
	transform: none !important;
}

body.reduced-motion .folder-content {
	animation: none !important;
}

body.reduced-motion .folder-backdrop {
	animation: none !important;
}

.folder-overlay.no-animation .folder-content {
	animation: none !important;
	transform: translate(-50%, -50%) scale(1) !important;
	opacity: 1 !important;
}

.folder-overlay.no-animation .folder-backdrop {
	animation: none !important;
	opacity: 1 !important;
}

.folder-overlay.no-animation .folder-title {
	animation: none !important;
	opacity: 1 !important;
}

/* Old status bar removed - now using WOS module (js/wos.js) */

/* Hide WOS status bar on actual mobile devices */
body.is-mobile-device .wos-status-bar {
	display: none !important;
}

/* On mobile devices, viewport takes full screen with no status bar space */
body.is-mobile-device {
	--status-height: 0px !important;
}

body.is-mobile-device #viewport {
	top: 0 !important;
	height: 100vh !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
	bottom: 0 !important;
}

/* On desktop, adjust viewport when WOS status bar is shown */
body:not(.is-mobile-device) #viewport {
	top: 44px !important; /* WOS status bar height */
	height: calc(100vh - 44px) !important;
}

/* Ensure app container also doesn't have extra padding on mobile */
body.is-mobile-device #appContainer,
body.is-mobile-device .app-container {
	top: 0 !important;
	height: 100vh !important;
	padding-top: 0 !important;
	bottom: 0 !important;
}

/* Old status bar classes removed - now using WOS module classes */

/* Old status bar element styles removed - now using WOS module */

#viewport {
	position: fixed;
	top: var(--status-height);
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: var(--z-content);
}

.screen {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

.screen.active {
	opacity: 1;
	pointer-events: none; /* Let events pass through to elements with higher z-index */
}

.app-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--app-spacing);
	padding: var(--spacing-xl) var(--spacing-lg);
	max-width: 500px;
	margin: 0 auto;
	visibility: hidden;
}

.app-grid.ready {
	visibility: visible;
}

@media (max-width: 400px) {
	.app-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--spacing-md);
		padding: var(--spacing-lg) var(--spacing-md);
	}
}

/* Mobile device-specific styles */
body.is-mobile-device {
	--folder-start-scale: 0.259; /* Mobile: ~70px icon / 270px folder = 0.259 */
	overflow-x: hidden; /* Prevent horizontal scroll on body */
	width: 100vw;
	max-width: 100vw;
	/* Additional fixes for mobile browser borders */
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	/* Extend viewport slightly to cover browser chrome borders */
	min-width: 100vw;
	min-height: 100vh;
}

body.is-mobile-device #homeScreen {
	overflow-x: visible; /* Allow canvas to extend beyond screen edges */
	width: 100vw;
	max-width: 100vw;
}

/* For home screen on mobile, allow viewport to show canvas extensions */
body.is-mobile-device[data-app="home"] #viewport {
	overflow: visible;
	overflow-x: visible;
}

body.is-mobile-device .app-grid {
	padding: 20px 12px; /* More padding for breathing room */
	gap: 14px; /* Slightly more gap between icons */
	max-width: 100%;
	/* Calculate grid to fit viewport exactly */
	grid-template-columns: repeat(4, 1fr);
}

body.is-mobile-device .app-icon {
	/* Override any transform scales */
	transform: none !important;
}

body.is-mobile-device .icon-image {
	/* Calculate size based on viewport width - made smaller */
	width: calc((100vw - 80px) / 4) !important; /* Increased padding/gaps for smaller icons */
	height: calc((100vw - 80px) / 4) !important;
	max-width: 70px !important; /* Reduced cap from 80px to 70px */
	max-height: 70px !important;
	/* Use a more generous border radius - about 22-25% for nice rounded look */
	border-radius: 18px !important; /* Slightly reduced for smaller icons */
}

body.is-mobile-device .icon-label {
	font-size: 11px; /* Slightly smaller for better proportion */
	max-width: calc(((100vw - 80px) / 4) * 1.3);
	padding: 2px 0;
}

/* Special handling for folder icons on mobile */
body.is-mobile-device .folder-preview {
	width: calc((100vw - 80px) / 4) !important;
	height: calc((100vw - 80px) / 4) !important;
	max-width: 70px !important;
	max-height: 70px !important;
	border-radius: 18px !important;
}

body.is-mobile-device .folder-icon {
	font-size: 18px; /* Smaller folder app icons */
}

/* Ensure icon images scale properly */
body.is-mobile-device .icon-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 18px !important;
}

/* Center glow effect for mobile */
body.is-mobile-device .icon-with-image::after {
	background: radial-gradient(
		ellipse at center,
		rgba(255, 255, 255, 0.35) 0%,
		rgba(255, 255, 255, 0.18) 30%,
		rgba(255, 255, 255, 0) 60%
	) !important;
	border-radius: 18px !important; /* Match mobile icon border-radius */
}

/* Folder grid on mobile - reduce column gap proportionally */
body.is-mobile-device .folder-grid {
	column-gap: 24px !important;
}

/* Folder grid icons on mobile - maintain desktop proportions but scale down */
body.is-mobile-device .folder-grid .icon-image {
	width: 55px !important;
	height: 55px !important;
	font-size: 26px !important;
	border-radius: 13px !important; /* Maintain ~24% ratio (13/55 ≈ 24%) */
}

body.is-mobile-device .folder-grid .icon-label {
	font-size: 10px !important;
}

body.is-mobile-device .folder-grid .app-icon {
	width: 55px !important;
	gap: 2px !important;
}

/* Ensure app content doesn't overflow on mobile */
body.is-mobile-device .app-content {
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
}

.app-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xs);
	cursor: pointer;
	transition: transform var(--timing-fast) ease;
	-webkit-tap-highlight-color: transparent;
}

.app-icon:hover {
	transform: scale(1.1);
}

.app-icon:active {
	transform: scale(0.95);
}

.icon-image {
	width: var(--app-icon-size);
	height: var(--app-icon-size);
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	box-shadow: var(--shadow-md);
	position: relative;
	/* No overflow: hidden here to allow drop-shadows to extend */
}

/* Message app - darker vibrant green mesh gradient (iMessage style) */
[data-app="message"] .icon-image {
	background:
		radial-gradient(ellipse at 80% 20%, rgba(50,190,100,0.3) 0%, transparent 50%),
		radial-gradient(ellipse at 20% 80%, rgba(80,210,130,0.25) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 80%, rgba(30,170,80,0.3) 0%, transparent 50%),
		linear-gradient(135deg, rgba(40,200,95,0.85) 0%, rgba(30,180,85,0.85) 100%);
}

/* Settings app - much lighter gray mesh gradient */
[data-app="settings"] .icon-image {
	background:
		radial-gradient(ellipse at 80% 20%, rgba(210,215,225,0.5) 0%, transparent 50%),
		radial-gradient(ellipse at 20% 80%, rgba(230,235,245,0.4) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 80%, rgba(190,195,205,0.5) 0%, transparent 50%),
		linear-gradient(135deg, rgba(200,205,215,0.7) 0%, rgba(190,195,205,0.7) 100%);
}

/* Individual mesh gradients for each toy/game based on their color */
/* Jungle Tower - #2d8659 (green) */
[data-app="jungle-tower"] .icon-image,
.folder-icon:nth-child(1), .folder-mini-icon:nth-child(1) {
	background: radial-gradient(ellipse at 80% 20%, rgba(55,160,105,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(75,180,125,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(35,140,85,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(45,134,89,0.6) 0%, rgba(35,114,79,0.6) 100%);
}

/* StarBeats - #8b4789 (purple) */
[data-app="starbeats"] .icon-image,
.folder-icon:nth-child(2), .folder-mini-icon:nth-child(2) {
	background: radial-gradient(ellipse at 80% 20%, rgba(155,87,153,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(175,107,173,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(135,67,133,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(139,71,137,0.6) 0%, rgba(119,61,117,0.6) 100%);
}

/* Neon Trigger - #1e3a5f (blue) */
[data-app="neon-trigger"] .icon-image,
.folder-icon:nth-child(3), .folder-mini-icon:nth-child(3) {
	background: radial-gradient(ellipse at 80% 20%, rgba(48,78,115,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(68,98,135,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(28,58,95,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(30,58,95,0.6) 0%, rgba(20,48,85,0.6) 100%);
}

/* SkyHighStax - #8b6331 (brown) */
[data-app="skyhighstax"] .icon-image,
.folder-icon:nth-child(4), .folder-mini-icon:nth-child(4) {
	background: radial-gradient(ellipse at 80% 20%, rgba(155,119,81,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(175,139,101,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(135,99,61,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(139,99,49,0.6) 0%, rgba(119,89,39,0.6) 100%);
}

/* Particles - #4ecdc4 (cyan) */
[data-app="particle-sim"] .icon-image,
.folder-icon:nth-child(1), .folder-mini-icon:nth-child(1) {
	background: radial-gradient(ellipse at 80% 20%, rgba(98,225,220,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(118,245,240,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(78,205,196,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(78,205,196,0.6) 0%, rgba(58,185,176,0.6) 100%);
}

/* Paint - #eb3b5a (red) */
[data-app="paint"] .icon-image,
.folder-icon:nth-child(2), .folder-mini-icon:nth-child(2) {
	background: radial-gradient(ellipse at 80% 20%, rgba(255,91,130,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(255,111,150,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(235,59,90,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(235,59,90,0.6) 0%, rgba(215,49,80,0.6) 100%);
}

/* Drums - #f9ca24 (yellow) */
[data-app="drum-kit"] .icon-image,
.folder-icon:nth-child(3), .folder-mini-icon:nth-child(3) {
	background: radial-gradient(ellipse at 80% 20%, rgba(255,220,84,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(255,235,104,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(249,202,36,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(249,202,36,0.6) 0%, rgba(229,182,26,0.6) 100%);
}

/* Maze - #ff6b6b (red) */
[data-app="maze"] .icon-image,
.folder-icon:nth-child(4), .folder-mini-icon:nth-child(4) {
	background: radial-gradient(ellipse at 80% 20%, rgba(255,131,131,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(255,151,151,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(255,107,107,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(255,107,107,0.6) 0%, rgba(235,97,97,0.6) 100%);
}

/* Meditation - #a55eea (purple) */
[data-app="meditation"] .icon-image,
.folder-icon:nth-child(5), .folder-mini-icon:nth-child(5) {
	background: radial-gradient(ellipse at 80% 20%, rgba(185,114,250,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(205,134,255,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(165,94,234,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(165,94,234,0.6) 0%, rgba(145,84,214,0.6) 100%);
}

/* Mandala - #26de81 (green) */
[data-app="mandala"] .icon-image,
.folder-icon:nth-child(6), .folder-mini-icon:nth-child(6) {
	background: radial-gradient(ellipse at 80% 20%, rgba(76,254,161,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(96,255,181,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(38,222,129,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(38,222,129,0.6) 0%, rgba(28,202,109,0.6) 100%);
}

/* Simon - #fd79a8 (pink) */
[data-app="simon"] .icon-image,
.folder-icon:nth-child(7), .folder-mini-icon:nth-child(7) {
	background: radial-gradient(ellipse at 80% 20%, rgba(255,141,188,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(255,161,208,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(253,121,168,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(253,121,168,0.6) 0%, rgba(233,111,158,0.6) 100%);
}

/* Fortune - #5f6fab (blue) */
[data-app="fortune-teller"] .icon-image,
.folder-icon:nth-child(8), .folder-mini-icon:nth-child(8) {
	background: radial-gradient(ellipse at 80% 20%, rgba(115,131,191,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(135,151,211,0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(95,111,171,0.4) 0%, transparent 50%), linear-gradient(135deg, rgba(95,111,171,0.6) 0%, rgba(85,101,161,0.6) 100%);
}

.icon-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg);
	/* Images clip to border-radius automatically */
}

/* Apply permanent effects to all icons */
:root {
	/* Glossy Top (#9) - always on */
	--default-glossy: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 50%);
	/* Micro Border (#11) - always on */
	--default-outline: 0.5px solid rgba(255,255,255,0.2);
	--default-outline-offset: -0.5px; /* Half the outline width to sit exactly on edge */
	/* Depth Shadow (#8) - always on */
	--default-shadow: drop-shadow(0 4px 8px rgba(0,0,0,0.25)) drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Create ::after overlay for ALL icons, not just ones with images */
.icon-image::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: var(--radius-lg);
	pointer-events: none;
	z-index: 1;

	/* Combine default + all optional background gradients/images */
	background-image:
		var(--bg-3, none),
		var(--bg-4, none),
		var(--bg-5, none),
		var(--bg-7, none),
		var(--bg-9, none),
		var(--bg-15, none),
		var(--bg-16, none),
		var(--bg-17, none),
		var(--default-glossy);

	/* Combine all box-shadows (inset and outset) */
	box-shadow:
		var(--shadow-1, 0 0 0 transparent),
		var(--shadow-6, 0 0 0 transparent),
		var(--shadow-12, 0 0 0 transparent),
		var(--shadow-19, 0 0 0 transparent);

	/* Default outline + optional override */
	outline: var(--outline-11, var(--default-outline));
	outline-offset: var(--outline-11-offset, var(--default-outline-offset));

	/* Border for #13 */
	border: var(--border-13, none);
	border-image: var(--border-image-13, none);

	/* Opacity for #10 */
	opacity: var(--opacity-10, 1);

	/* Backdrop filter for #3 */
	backdrop-filter: var(--backdrop-3, none);
}

.icon-image {
	/* Combine default shadow + all optional filters */
	filter:
		var(--default-shadow)
		var(--filter-2, opacity(1))
		var(--filter-8, opacity(1))
		var(--filter-18, opacity(1))
		var(--filter-20, opacity(1));

	/* Transform for #14 */
	transform: var(--transform-14, none);
	transform-style: var(--transform-style-14, flat);
}

/* Effect 1: Subtle Inner Shadow */
body.icon-effect-1 { --shadow-1: inset 0 4px 12px rgba(0,0,0,0.3); }

/* Effect 2: Neumorphism */
body.icon-effect-2 { --filter-2: drop-shadow(-4px -4px 8px rgba(255,255,255,0.1)) drop-shadow(4px 4px 8px rgba(0,0,0,0.3)); }

/* Effect 3: Glassmorphism */
body.icon-effect-3 {
	--bg-3: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1));
	--backdrop-3: blur(10px);
}

/* Effect 4: Linear Gradient Overlay */
body.icon-effect-4 { --bg-4: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); }

/* Effect 5: Corner Highlight */
body.icon-effect-5 { --bg-5: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%); }

/* Effect 6: Edge Rim Light */
body.icon-effect-6 { --shadow-6: inset 2px 2px 0 rgba(255,255,255,0.3), inset -2px -2px 0 rgba(0,0,0,0.1); }

/* Effect 7: Vignette Effect */
body.icon-effect-7 { --bg-7: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.3) 100%); }

/* Effect 8: Depth Shadow Bottom - only from bottom edge */
body.icon-effect-8 { --filter-8: drop-shadow(0 4px 8px rgba(0,0,0,0.25)) drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }

/* Effect 9: Glossy Top Highlight - subtle warm white */
body.icon-effect-9 { --bg-9: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 50%); }

/* Effect 10: Matte Flat */
body.icon-effect-10 { --opacity-10: 0; }

/* Effect 11: Micro Border */
body.icon-effect-11 {
	--outline-11: 0.5px solid rgba(255,255,255,0.2);
	--outline-11-offset: -1px;
}

/* Effect 12: Double Border */
body.icon-effect-12 { --shadow-12: inset 0 0 0 1px rgba(255,255,255,0.3), inset 0 0 0 3px rgba(255,255,255,0.1); }

/* Effect 13: Gradient Border */
body.icon-effect-13 {
	--border-13: 2px solid transparent;
	--border-image-13: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1)) 1;
}

/* Effect 14: Perspective Tilt */
body.icon-effect-14 {
	--transform-14: perspective(600px) rotateY(2deg) rotateX(1deg);
	--transform-style-14: preserve-3d;
}

/* Effect 15: Noise Texture */
body.icon-effect-15 { --bg-15: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence baseFrequency="0.9"/></filter><rect width="100" height="100" filter="url(%23n)" opacity="0.05"/></svg>'); }

/* Effect 16: Shine Streak */
body.icon-effect-16 { --bg-16: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 100%); }

/* Effect 17: Bottom Glow */
body.icon-effect-17 { --bg-17: radial-gradient(ellipse at center bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%); }

/* Effect 18: Soft Blur Edge */
body.icon-effect-18 { --filter-18: drop-shadow(0 0 1px rgba(255,255,255,0.2)); }

/* Effect 19: Color Shift Border */
body.icon-effect-19 { --shadow-19: 0 0 0 2px rgba(255,255,255,0.15); }

/* Effect 20: Layered Shadows */
body.icon-effect-20 { --filter-20: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) drop-shadow(0 4px 8px rgba(0,0,0,0.15)) drop-shadow(0 8px 16px rgba(0,0,0,0.2)); }


.folder .icon-image {
	box-shadow: var(--shadow-md);
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

/* Remove glossy effect from folder container itself */
.folder > .icon-image::after {
	background-image: none !important;
}

/* But keep glossy on the 4 preview icons inside folders */
.folder-preview .folder-icon::after,
.folder-preview .folder-mini-icon::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: var(--default-glossy);
	outline: var(--default-outline);
	outline-offset: var(--default-outline-offset);
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
}

.folder-preview {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	padding: 10px;
	gap: 6px;
	align-content: center;
}

.folder-icon {
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative; /* For ::after positioning */
	border-radius: 7.5px; /* Proportional to 50px icons with 12px radius: 12 * (32/50) ≈ 7.5px */
}

.folder-mini-icon {
	position: relative; /* For ::after positioning */
	border-radius: 7.5px; /* Match folder-icon */
}

.folder-mini-icon {
	/* Mini icons in folder preview on home screen */
	/* Scaled down from 50px folder grid icons */
	/* Icon: 90px, padding: 10px each side = 70px, gap: 6px total = 64px, each cell: 32px */
	/* 50px -> 32px = 64% scale */
	width: 100%;
	height: 100%;
	font-size: 15px !important; /* 24px × 0.64 ≈ 15px */
	aspect-ratio: 1;
}

.icon-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
	max-width: calc(var(--app-icon-size) * 1.3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.folder-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-modal);
	display: none;
}

.folder-overlay.active,
.folder-overlay.closing {
	display: block;
}

.folder-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
}

.folder-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + var(--icon-offset-x, 0px)), calc(-50% + var(--icon-offset-y, 0px))) scale(0.333);
	width: 90%;
	max-width: 270px;
	max-height: 75%;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	border-radius: var(--radius-xl);
	padding: 14px 0 30px 0;
	box-shadow: var(--shadow-xl);
	opacity: 0;
	overflow: visible;
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}

.folder-overlay.active:not(.closing) .folder-content {
	animation: folderGrowIn 0.35s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.folder-overlay.active:not(.closing) .folder-backdrop {
	animation: folderBackdropIn 0.35s ease forwards;
}

.folder-overlay.active:not(.closing) .folder-title {
	animation: folderTitleIn 0.35s ease forwards;
}

.folder-overlay.closing .folder-content {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	animation: folderGrowOut 0.35s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.folder-overlay.closing .folder-backdrop {
	opacity: 1;
	animation: folderBackdropOut 0.35s ease forwards;
}

.folder-overlay.closing .folder-title {
	opacity: 1;
	animation: folderTitleOut 0.35s ease forwards;
}

.folder-title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -45px;
	font-size: 26px;
	font-weight: 600;
	color: #fff;
	z-index: 10;
	text-align: center;
	pointer-events: none;
	white-space: nowrap;
	opacity: 0;
}

.folder-close {
	background: rgba(255,255,255,0.1);
	border: none;
	color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--timing-fast) ease;
}

.folder-close:hover {
	background: rgba(255,255,255,0.2);
}

.folder-grid {
	display: grid;
	grid-template-columns: repeat(3, auto);
	column-gap: 32px;
	row-gap: 10px;
	overflow-y: auto;
	overflow-x: visible;
	flex: 1;
	padding: 8px 12px;
	justify-content: center;
}

.folder-grid .app-icon {
	margin: 0;
	min-width: 0;
	width: 50px;
	gap: 2px;
}

.folder-grid .icon-image {
	width: 50px;
	height: 50px;
	font-size: 24px;
	border-radius: 12px;
	position: relative;
}

.folder-grid .icon-image::after {
	border-radius: 12px; /* Match parent's smaller border radius */
}

.mobile-badge {
	position: absolute;
	bottom: -3px;
	left: -3px;
	font-size: 12px;
	line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.folder-grid .icon-label {
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-container {
	position: fixed;
	top: var(--status-height);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-overlay);
	background: var(--bg-primary);
	opacity: 0;
	pointer-events: none;
}

.app-container.active {
	opacity: 1;
	pointer-events: auto;
}


.app-content {
	padding: var(--spacing-lg);
	overflow-y: auto;
	height: 100%;
	-webkit-overflow-scrolling: touch;
}

/* Special handling for Me app to prevent double scrollbars */
body[data-app="me"] .app-content {
	overflow-y: auto; /* Keep scrolling on the outer container only */
	overflow-x: hidden; /* Prevent horizontal scroll */
}


.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes scaleIn {
	from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
	to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes folderGrowIn {
	from {
		transform: translate(calc(-50% + var(--icon-offset-x, 0px)), calc(-50% + var(--icon-offset-y, 0px))) scale(var(--folder-start-scale));
		opacity: 0;
	}
	to {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

@keyframes folderBackdropIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes folderTitleIn {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes folderGrowOut {
	from {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	to {
		transform: translate(calc(-50% + var(--icon-offset-x, 0px)), calc(-50% + var(--icon-offset-y, 0px))) scale(var(--folder-start-scale));
		opacity: 0;
	}
}

@keyframes folderBackdropOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes folderTitleOut {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 0; }
}

/* Mobile-specific Naquatic styles - MUST come last for specificity */
body.is-mobile-device[data-app="naquatic"] .app-container {
	/* Remove background from container on mobile */
	background-image: none !important;
	background-color: #000708 !important;
}

body.is-mobile-device[data-app="naquatic"] .app-content {
	/* Remove all masks on mobile - no masking effect */
	-webkit-mask-image: none !important;
	mask-image: none !important;
	-webkit-mask: none !important;
	mask: none !important;
	/* Transparent background */
	background: transparent !important;
	/* Add padding at bottom for iOS address bar */
	padding-bottom: 100px !important;
}

/* Mobile wrapper and background image styles */
body.is-mobile-device[data-app="naquatic"] .naquatic-mobile-wrapper {
	position: relative !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Ensure app content container starts at top on mobile */
body.is-mobile-device[data-app="naquatic"] .app-content {
	padding-top: 0 !important;
}

body.is-mobile-device[data-app="naquatic"] .mobile-bg-image {
	display: block !important;
	/* Keep in normal flow */
	position: static !important;
	width: 200% !important; /* Make image 2x bigger */
	max-width: none !important;
	height: auto !important;
	transform: translateX(-25%); /* Center the wider image */
}

body.is-mobile-device[data-app="naquatic"] .naquatic-content {
	/* Add padding to account for logo at top of background */
	padding-top: 50vw !important; /* Increased due to larger image */
	/* Use negative margin to overlap the image - adjusted for 2x size */
	margin-top: -208vw !important; /* Double the previous value for 2x image */
	/* Relative position for z-index to work */
	position: relative !important;
	z-index: 1 !important;
	/* Reset other properties */
	max-width: 800px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	/* NO GRADIENT - solid background for readability */
	background: transparent !important;
	/* Ensure minimum height */
	min-height: 100vh !important;
	/* Padding for content */
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* Remove gradient from desktop too */
body[data-app="naquatic"] .naquatic-content {
	background: transparent !important;
}

/* Add borders to ALL Naquatic app icons (desktop and mobile) */
body[data-app="naquatic"] .naquatic-content section:nth-of-type(2) > div a > div {
	border: 1px solid rgba(148, 223, 252, 0.3) !important;
}

/* Add borders to small icons too */
body[data-app="naquatic"] .naquatic-content section:nth-of-type(3) > div a img {
	border: 1px solid rgba(148, 223, 252, 0.3) !important;
}

/* Mobile-specific Naquatic text and layout adjustments */
body.is-mobile-device[data-app="naquatic"] .naquatic-content section:first-of-type p {
	text-align: center !important;
}

/* Mobile-specific Naquatic icon layouts */

/* Specifically target the main 2x2 grid (4 main apps) */
body.is-mobile-device[data-app="naquatic"] .naquatic-content section:nth-of-type(2) > div {
	display: grid !important;
	grid-template-columns: 1fr !important; /* Stack vertically */
	grid-template-rows: auto !important;
	gap: 20px !important;
	padding: 10px !important;
}

body.is-mobile-device[data-app="naquatic"] .naquatic-content section:nth-of-type(2) > div a {
	width: 100% !important;
	max-width: 300px !important;
	margin: 0 auto !important;
	display: block !important;
}

/* Target the flex row of 6 small icons - 2x3 grid with reduced vertical spacing */
body.is-mobile-device[data-app="naquatic"] .naquatic-content section:nth-of-type(3) > div {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 10px !important;
	row-gap: 8px !important; /* Less vertical space between rows */
	padding: 10px !important;
	justify-content: center !important;
}

body.is-mobile-device[data-app="naquatic"] .naquatic-content section:nth-of-type(3) > div a {
	flex: none !important;
	width: 100% !important;
}

body.is-mobile-device[data-app="naquatic"] .naquatic-content section:nth-of-type(3) > div img {
	width: 100% !important;
	height: auto !important;
	/* Remove forced square aspect ratio to let images be bigger */
	max-height: 140px !important;
	object-fit: contain !important; /* Preserve original aspect ratio */
	border-radius: 8px !important;
}

/* ============================================
   RAIN NAVIGATION SYSTEM
   ============================================ */

#categoryHeaders {
	position: fixed;
	top: 60px;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	padding: 0 40px;
	gap: 15px;
	z-index: 10;
	pointer-events: none; /* Allow canvas interaction */
}

.category-header {
	cursor: pointer;
	pointer-events: auto;
	user-select: none;
	-webkit-user-select: none;
}

/* Cloud header images */
.cloud-header-svg {
	height: 100px;
	width: auto;
	pointer-events: none;
	transform-origin: top center;
	/* No transitions - keep clouds static */
}

#rainContainer {
	position: fixed;
	top: 220px;
	left: 50%;
	transform: translateX(-50%);
	width: 400px;
	max-width: 90%;
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	padding: 20px;
	z-index: 5;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Rain item wrapper - contains droplet + label */
.rain-item-wrapper {
	position: relative;
	pointer-events: auto;
	z-index: 100; /* Must be above viewport (z-index: 10) */
	/* Wrapper now auto-sizes to content */
	display: inline-flex;
}



/* Rounded rectangle button with cell membrane effect */
.rain-item {
	/* Flexible dimensions to fit content */
	min-width: 100px;
	height: 50px;
	padding: 0 20px;

	/* No direct background - using ::before pseudo-element instead */
	background: transparent;
	border: none;

	/* Shape controlled by clip-path animation, not border-radius */
	border-radius: 0;

	/* No rotation needed */
	transform: none;

	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	position: relative;

	/* Flex layout for icon + text */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	/* No clip-path on parent - let pseudo-elements handle it */
	/* Box-shadow moved to ::before to follow the clipped shape */

	/* Ensure content isn't clipped by parent containers */
	overflow: visible;

	/* Add extra margin to account for bulging beyond bounds */
	margin: 0 3px;
}

/* Border layer - outer clip-path animation */
.rain-item::before {
	content: '';
	position: absolute;
	top: -5%;
	left: -5%;
	right: -5%;
	bottom: -5%;
	/* Border color varies with sky - set by canvas-bg.v2.js */
	background: var(--button-border-color, rgba(148, 223, 252, 0.7));
	z-index: -2;
	/* Outer clip-path animation - inherits delay via CSS variable */
	animation: cellMembrane 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
	animation-delay: var(--button-delay, 0ms);
	/* Shadow follows clipped shape */
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Fill layer - inset clip-path animation, uses button color with ocean-inspired depth */
.rain-item::after {
	content: '';
	position: absolute;
	top: -5%;
	left: -5%;
	right: -5%;
	bottom: -5%;
	/* Subtle layered gradients for ocean-like depth */
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.12) 0%,
			rgba(255, 255, 255, 0.04) 25%,
			transparent 45%),
		radial-gradient(ellipse at 50% 30%,
			rgba(148, 223, 252, 0.15) 0%,
			transparent 50%),
		linear-gradient(180deg,
			transparent 65%,
			rgba(0, 30, 60, 0.2) 100%),
		var(--button-fill-color, #0277bd);
	z-index: -1;
	/* Inner clip-path animation - inherits delay via CSS variable */
	animation: cellMembraneFill 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
	animation-delay: var(--button-delay, 0ms);
}

/* Icon content area - no rotation needed */
.rain-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

/* Icon background - no longer needed for fill (handled by ::after) */
.rain-item-icon-bg {
	display: none;
}

/* Icon image */
.rain-item-icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	position: relative;
	z-index: 2;
}

/* Icon emoji */
.rain-item-icon-emoji {
	font-size: 24px;
	position: relative;
	z-index: 2;
	line-height: 1;
}

/* Text label inside button */
.rain-item-label {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
	user-select: none;
	-webkit-user-select: none;
	white-space: nowrap;
	position: relative;
	z-index: 2;

	/* Always visible */
	opacity: 1;
}

.rain-item:hover {
	transform: scale(1.05); /* Scale up 5% from center without affecting animation */
	transition: transform 0.2s ease;
}

/* Cell membrane animation - GENERATED BY JAVASCRIPT
   See js/cell-membrane.js for procedural keyframe generation.
   The @keyframes cellMembrane is injected into <head> at runtime. */

.water-droplet {
	/* Styles set inline, but this ensures consistency */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Mobile adjustments for rain navigation */
@media (max-width: 768px) {
	#categoryHeaders {
		top: 40px;
		padding: 0 10px;
		gap: 12px;
	}

	.cloud-header-svg {
		height: 32px !important;
		width: auto !important;
		transform: none !important;
	}

	#rainContainer {
		top: 130px;
		width: 90%;
		padding: 10px;
	}

	.rain-item {
		width: 65px;
		height: 65px;
		font-size: 10px;
	}

	.rain-item-content {
		padding: 5px;
	}
}

/* ============================================================================
   CONTENT CARDS - Expandable cards with cell membrane border
   ============================================================================ */

.content-card-wrapper {
	position: fixed;
	pointer-events: auto;
	z-index: 1000; /* Topmost - above everything including overlay (900) */
	transform-origin: center center;
}

.content-card {
	position: relative;
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: hidden; /* Clip content to card bounds */

	/* Content styling */
	color: #fff;
	/* Padding to keep content inside the wavy border visual area */
	/* Border polygon spans roughly 6.5%-93.5% horizontally, 7%-93% vertically */
	padding: 8% 7%;
}

/* Border layer - card-specific animation with uniform border thickness */
.content-card::before {
	content: '';
	position: absolute;
	top: -3%;
	left: -3%;
	right: -3%;
	bottom: -3%;
	background: var(--card-border-color, rgba(148, 223, 252, 0.7));
	z-index: -2;
	/* Use card-specific animation: more keyframes, uniform border */
	animation: cellMembraneCard 2s linear infinite;
	animation-delay: var(--card-delay, 0ms);
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

/* Fill layer - card-specific animation with uniform border thickness */
.content-card::after {
	content: '';
	position: absolute;
	top: -3%;
	left: -3%;
	right: -3%;
	bottom: -3%;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.08) 0%,
			rgba(255, 255, 255, 0.02) 20%,
			transparent 40%),
		radial-gradient(ellipse at 50% 20%,
			rgba(148, 223, 252, 0.1) 0%,
			transparent 50%),
		linear-gradient(180deg,
			transparent 70%,
			rgba(0, 30, 60, 0.15) 100%),
		var(--card-fill-color, #0a2540);
	z-index: -1;
	/* Use card-specific animation: more keyframes, uniform border */
	animation: cellMembraneCardFill 2s linear infinite;
	animation-delay: var(--card-delay, 0ms);
}

/* Square card variant (Me card) - uses different inset values for uniform border */
.content-card--square::before {
	animation-name: cellMembraneCardSquare;
}

.content-card--square::after {
	animation-name: cellMembraneCardSquareFill;
}

/* Card content container */
.content-card-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	box-sizing: border-box;
}

/* Wide cards in landscape: disable outer scroll, let inner sections scroll */
@media (min-width: 900px) {
	.content-card--wide {
		padding-top: 7%;
		padding-bottom: 7%;
	}
	.content-card--wide .content-card-inner {
		overflow-y: hidden;
	}
	.content-card--wide .content-card-body {
		height: 100%;
	}
}

/* Content body */
.content-card-body {
	box-sizing: border-box;
}

/* ============================================
   PORTRAIT MODE - inset scrollbar from wavy border
   ============================================ */
@media (orientation: portrait) {
	.content-card-inner {
		/* Inset scrollbar away from the wavy border edge */
		padding-right: 4px;
	}

	/* Style the scrollbar for portrait */
	.content-card-inner::-webkit-scrollbar {
		width: 5px;
	}

	.content-card-inner::-webkit-scrollbar-track {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 3px;
		/* Shorten scrollbar vertically to match content framing */
		margin: 10% 0;
	}

	.content-card-inner::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.3);
		border-radius: 3px;
	}
}

/* Card header with title and close button */
.content-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.content-card-title {
	font-size: 24px;
	font-weight: 600;
	color: #fff;
	margin: 0;
}

.content-card-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	z-index: 10;
}

.content-card-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* Dark overlay behind card */
.content-card-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	z-index: 900;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.content-card-overlay.visible {
	opacity: 1;
}

/* Polaroids inside card */
.card-polaroid {
	position: relative;
	background: #ece6d9;
	padding: 6px 6px 36px 6px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}

.card-polaroid img {
	width: 140px;
	height: 130px;
	object-fit: cover;
	display: block;
}

.card-polaroid-caption {
	position: absolute;
	bottom: 5px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.1;
	color: #2a2622;
	font-family: 'Kalam', cursive;
	font-weight: bold;
}

.card-polaroid:hover {
	transform: rotate(0deg) scale(1.08) !important;
	box-shadow: 0 10px 30px rgba(0,0,0,0.4);
	z-index: 10;
}