html, body {
	padding: 0;
	margin: 0;
	overflow: hidden;
	height: 100%;
	background-color: #0a0a0c !important;
}

body {
	background: #0a0a0c !important;
	color: white;
}

input[type="file"] {
	color: black;
}

/* for scaling checkboxes according to the font size */
.c3-auto-size-checkbox {
	font-size: 1em;
	width: 1em;
	height: 1em;
	vertical-align: bottom;
	margin: 0.1em 0.25em;
}

html, body, canvas {
	touch-action-delay: none;
	touch-action: none;
}

canvas, .c3htmlwrap {
	position: absolute;
}

.c3htmlwrap {
	contain: strict;
}

.c3overlay {
	pointer-events: none;
}

.c3htmlwrap[interactive] > * {
	pointer-events: auto;
}

/* HACK - work around elements being selectable only in iOS WKWebView for some reason */
html[ioswebview] .c3htmlwrap,
html[ioswebview] canvas {
	-webkit-user-select: none;
	user-select: none;
}

html[ioswebview] .c3htmlwrap > * {
	-webkit-user-select: auto;
	user-select: auto;
}

#notSupportedWrap {
	margin: 2em auto 1em auto;
	width: 75%;
	max-width: 45em;
	border: 2px solid #aaa;
	border-radius: 1em;
	padding: 2em;
	background-color: #f0f0f0;
	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	color: black;
}

#notSupportedTitle {
	font-size: 1.8em;
}

.notSupportedMessage {
	font-size: 1.2em;
}

.notSupportedMessage em {
	color: #888;
}

/* bbcode styles */
.bbCodeH1 {
	font-size: 2em;
	font-weight: bold;
}

.bbCodeH2 {
	font-size: 1.5em;
	font-weight: bold;
}

.bbCodeH3 {
	font-size: 1.25em;
	font-weight: bold;
}

.bbCodeH4 {
	font-size: 1.1em;
	font-weight: bold;
}

.bbCodeItem::before {
	content: " • ";
}

/* For text icons converted to HTML: size the height to the line height
   preserving the aspect ratio. Also add position: relative as that allows
   just adding a 'top' style for the iconoffsety style. */
.c3-text-icon {
	height: 1em;
	width: auto;
	position: relative;
}

/* screen reader text */
.c3-screen-reader-text {
	position: absolute;
	width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* =========================================================
   GOOSE RESCUE - LIVELY HIGH-END GAME UI STYLING
   Theme: Hand-carved Wood, Gold Trim, Stone Masonry, Sunny Sky
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Outfit:wght@600;700;800;900&display=swap');

/* Living Sunny Sky Atmosphere Backdrop */
body {
	background: #1baee2;
	background: radial-gradient(circle at 85% 15%, rgba(255, 245, 205, 0.45) 0%, transparent 45%),
	            linear-gradient(180deg, #1aafe4 0%, #2cc4f0 40%, #52d6f7 70%, #20b8e6 100%);
	color: white;
	font-family: 'Outfit', 'Fredoka', -apple-system, sans-serif;
	user-select: none;
	-webkit-user-select: none;
}

/* Drifting Cartoon Cloud Layers behind canvas */
.cloud-layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 200%;
	height: 35%;
	pointer-events: none;
	z-index: 0;
	opacity: 0.35;
	background-repeat: repeat-x;
	background-size: 600px auto;
}

.cloud-layer-1 {
	background-image: radial-gradient(circle at 100px 60px, rgba(255,255,255,0.9) 40px, transparent 42px),
	                  radial-gradient(circle at 150px 45px, rgba(255,255,255,0.95) 55px, transparent 58px),
	                  radial-gradient(circle at 210px 60px, rgba(255,255,255,0.9) 45px, transparent 48px),
	                  radial-gradient(ellipse at 155px 75px, rgba(255,255,255,0.95) 85px 35px, transparent 90px);
	animation: cloudMove 48s linear infinite;
}

.cloud-layer-2 {
	top: 8%;
	opacity: 0.22;
	background-size: 850px auto;
	animation: cloudMove 80s linear infinite reverse;
}

@keyframes cloudMove {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-50%, 0, 0); }
}

/* Floating magical dust motes */
.ambient-motes-container {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

/* Canvas-Locked Lively UI Overlay Container */
#bear-lively-ui-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 999;
	overflow: hidden;
	box-sizing: border-box;
}

/* Top HUD Bar */
.lively-top-hud {
	position: absolute;
	top: 1.6%;
	left: 2.2%;
	width: 95.6%;
	height: 7.2%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

/* 3D Round Squircle Buttons (Home & Restart) */
.lively-circle-btn {
	pointer-events: auto;
	cursor: pointer;
	height: 100%;
	aspect-ratio: 1;
	border-radius: 26%;
	background: linear-gradient(180deg, #5de1ff 0%, #17a9e0 45%, #0572b8 100%);
	border: 3px solid #ffdf85;
	box-shadow: 0 5px 0 #074775,
	            0 7px 14px rgba(0, 0, 0, 0.4),
	            inset 0 2px 4px rgba(255, 255, 255, 0.8),
	            inset 0 -3px 6px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform 0.08s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.08s ease;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.lively-circle-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px) scale(1.03);
}

.lively-circle-btn:active {
	transform: translateY(4px) scale(0.95);
	box-shadow: 0 1px 0 #074775,
	            0 2px 6px rgba(0, 0, 0, 0.3),
	            inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.lively-circle-btn svg {
	width: 58%;
	height: 58%;
	filter: drop-shadow(0 2px 2px rgba(0, 40, 80, 0.6));
	fill: #ffffff;
}

/* Handcrafted Oak & Gold Plaque (Level + Progress Bar) */
.lively-wood-plaque {
	pointer-events: auto;
	height: 100%;
	flex: 1;
	margin: 0 10px;
	border-radius: 18px;
	background: radial-gradient(circle at 50% 20%, #e8a86c 0%, #c48247 50%, #9a5a27 100%);
	border: 3px solid #572908;
	box-shadow: 0 6px 0 #3a1903,
	            0 8px 18px rgba(0, 0, 0, 0.45),
	            inset 0 2px 2px rgba(255, 235, 185, 0.7),
	            inset 0 -3px 5px rgba(50, 20, 0, 0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3px 12px 6px 12px;
	box-sizing: border-box;
	position: relative;
}

/* Golden Corner Screws on Plaque */
.lively-wood-plaque::before,
.lively-wood-plaque::after {
	content: '';
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff1a8 0%, #d49f33 60%, #875c0f 100%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.lively-wood-plaque::before { top: 4px; left: 6px; }
.lively-wood-plaque::after { top: 4px; right: 6px; }

/* Level Header Title */
.lively-level-title {
	font-family: 'Fredoka', 'Outfit', sans-serif;
	font-size: clamp(14px, 2.4vw, 22px);
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #fff8d6;
	text-shadow: 0 2px 0 #5f2a05,
	             0 3px 6px rgba(0, 0, 0, 0.6);
	margin-bottom: 2px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.lively-level-star {
	color: #ffd633;
	font-size: 0.85em;
	filter: drop-shadow(0 1px 2px #5f2a05);
	animation: starTwinkle 3s ease-in-out infinite;
}

@keyframes starTwinkle {
	0%, 100% { transform: scale(1); filter: brightness(1); }
	50% { transform: scale(1.2); filter: brightness(1.3); }
}

/* Liquid Progress Bar Track */
.lively-progress-track {
	width: 96%;
	height: 38%;
	background: #381907;
	border-radius: 12px;
	box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8),
	            0 1px 0 rgba(255, 235, 180, 0.4);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}

/* Liquid Emerald & Amber Glowing Fill */
.lively-progress-fill {
	height: 100%;
	width: 0%;
	border-radius: 12px;
	background: linear-gradient(180deg, #96ff5e 0%, #30df2b 40%, #159b12 100%);
	box-shadow: 0 0 10px rgba(50, 235, 40, 0.7),
	            inset 0 2px 3px rgba(255, 255, 255, 0.8),
	            inset 0 -2px 3px rgba(10, 80, 10, 0.5);
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	overflow: hidden;
}

/* Animated liquid sheen reflection across progress bar */
.lively-progress-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
	animation: liquidSheen 2.8s infinite;
}

@keyframes liquidSheen {
	0% { left: -100%; }
	40%, 100% { left: 150%; }
}

/* Percentage Text inside progress bar */
.lively-progress-text {
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: clamp(10px, 1.7vw, 15px);
	font-weight: 800;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85),
	             0 0 4px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

/* =========================================================
   BOTTOM BOOSTER BAR (BOMB, +, SHUFFLE)
   ========================================================= */
.lively-booster-bar {
	position: absolute;
	bottom: 1.6%;
	left: 2.2%;
	width: 95.6%;
	height: 7.2%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

/* 3D Tactile Booster Pill Button */
.lively-booster-btn {
	pointer-events: auto;
	cursor: pointer;
	width: 39%;
	height: 100%;
	border-radius: 35px;
	background: linear-gradient(180deg, #4dc3ff 0%, #1e9ae8 45%, #086bbd 100%);
	border: 3px solid #ffde82;
	box-shadow: 0 6px 0 #064578,
	            0 8px 16px rgba(0, 0, 0, 0.45),
	            inset 0 3px 5px rgba(255, 255, 255, 0.8),
	            inset 0 -3px 5px rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 14px;
	box-sizing: border-box;
	position: relative;
	transition: transform 0.08s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.08s ease;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

/* Subtle Rhythmic Pulsing Glow Aura on Boosters */
.lively-booster-btn::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 40px;
	border: 2px solid rgba(80, 200, 255, 0.5);
	opacity: 0;
	animation: boosterAura 3s ease-in-out infinite;
	pointer-events: none;
}

@keyframes boosterAura {
	0%, 100% { opacity: 0; transform: scale(0.97); }
	50% { opacity: 0.8; transform: scale(1.03); }
}

.lively-booster-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-2px) scale(1.02);
}

.lively-booster-btn:active {
	transform: translateY(4px) scale(0.96);
	box-shadow: 0 2px 0 #064578,
	            0 3px 8px rgba(0, 0, 0, 0.35),
	            inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Booster Icon */
.lively-booster-icon-wrap {
	width: clamp(28px, 4.5vw, 44px);
	height: clamp(28px, 4.5vw, 44px);
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.lively-booster-icon-wrap svg {
	width: 100%;
	height: 100%;
}

/* Booster Text */
.lively-booster-label {
	font-family: 'Fredoka', 'Outfit', sans-serif;
	font-size: clamp(15px, 2.6vw, 24px);
	font-weight: 700;
	letter-spacing: 0.8px;
	color: #ffffff;
	text-shadow: 0 2px 0 #074775,
	             0 3px 5px rgba(0, 0, 0, 0.6);
}

/* Center Add Slot (+) Stone & Crystal Button */
.lively-plus-btn {
	pointer-events: auto;
	cursor: pointer;
	height: 100%;
	aspect-ratio: 1;
	border-radius: 24%;
	background: radial-gradient(circle at 35% 35%, #ff529a 0%, #e8166c 50%, #9e0843 100%);
	border: 3px solid #e0dfdb;
	box-shadow: 0 6px 0 #6e052e,
	            0 8px 16px rgba(0, 0, 0, 0.5),
	            inset 0 3px 4px rgba(255, 180, 215, 0.8),
	            inset 0 -3px 5px rgba(40, 0, 15, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform 0.08s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.08s ease;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.lively-plus-btn::before {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 30%;
	border: 2px solid rgba(255, 60, 140, 0.6);
	animation: crystalPulse 2s ease-in-out infinite;
	pointer-events: none;
}

@keyframes crystalPulse {
	0%, 100% { opacity: 0.2; transform: scale(0.95); }
	50% { opacity: 0.9; transform: scale(1.08); }
}

.lively-plus-btn:hover {
	filter: brightness(1.12);
	transform: translateY(-2px) scale(1.04);
}

.lively-plus-btn:active {
	transform: translateY(4px) scale(0.95);
	box-shadow: 0 2px 0 #6e052e,
	            0 3px 8px rgba(0, 0, 0, 0.35);
}

.lively-plus-btn svg {
	width: 58%;
	height: 58%;
	fill: #ffffff;
	filter: drop-shadow(0 2px 3px rgba(80, 0, 30, 0.6));
}


/* =========================================================
   DYNAMIC LEVEL START CELEBRATION BANNER (PERFECTLY CENTERED)
   ========================================================= */
.lively-banner-wrap {
	position: fixed;
	top: clamp(10px, 2vh, 20px);
	left: 50%;
	transform: translateX(-50%) translateY(-120%);
	opacity: 0;
	pointer-events: none;
	z-index: 10000;
	transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}

.lively-banner-wrap.show-banner {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.lively-banner-box {
	background: radial-gradient(circle at 50% 20%, #ffdf85 0%, #e5a73b 50%, #b37318 100%);
	border: 3.5px solid #572908;
	border-radius: 22px;
	padding: 10px 32px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5),
	            0 0 30px rgba(255, 220, 100, 0.5),
	            inset 0 3px 6px rgba(255, 255, 255, 0.8);
	text-align: center;
	white-space: nowrap;
}

.lively-banner-level {
	font-family: 'Rubik', 'Fredoka', 'Outfit', sans-serif;
	font-size: clamp(20px, 4vw, 30px);
	font-weight: 800;
	color: #fff9e6;
	text-shadow: 0 3px 0 #572908,
	             0 5px 12px rgba(0, 0, 0, 0.7);
	letter-spacing: 1px;
}

.lively-banner-sub {
	font-family: 'Rubik', 'Fredoka', 'Outfit', sans-serif;
	font-size: clamp(11px, 2.2vw, 14px);
	font-weight: 800;
	color: #522405;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-top: 2px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Dedicated Lightweight FX Particle Canvas */
#lively-fx-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 90;
}