@font-face {
	font-family: 'Gagalin';
	src: url('../public/fonts/Gagalin-Regular.otf') format('opentype');
	font-display: swap;
}

:root {
	--glass-bg: rgba(255, 255, 255, 0.12);
	--glass-border: rgba(255, 255, 255, 0.35);
	--glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	--radius: 18px;
	--text: #f6efe3;
}

html, body, #app {
	height: 100%;
}

/* Apply requested gradient globally */
html {
	background: #000000;
	background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 1) 22%, rgba(87, 63, 2, 1) 57%, rgba(255, 157, 0, 1) 76%);
	background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 1) 22%, rgba(87, 63, 2, 1) 57%, rgba(255, 157, 0, 1) 76%);
	background: linear-gradient(45deg, rgba(0, 0, 0, 1) 22%, rgba(87, 63, 2, 1) 57%, rgba(255, 157, 0, 1) 76%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#FF9D00", GradientType=0);
}

body {
	margin: 0;
	color: var(--text);
	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
	background: transparent;
}

* { box-sizing: border-box; }

.container {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0; /* remove bottom padding to eliminate visible bar */
}

.glass {
	background: var(--glass-bg);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	border-radius: var(--radius);
}

/* iOS-like glassmorphism (closer to iOS 16 frosted panels) */
.glass-ios {
	position: relative;
	background: rgba(255,255,255,0.18);
	background-image: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.18) 40%, rgba(255,255,255,0.10) 100%);
	backdrop-filter: blur(22px) saturate(180%);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(255,255,255,0.30);
	box-shadow: 0 10px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.35);
	border-radius: var(--radius);
    color: #000; /* black text for clarity on iOS-style glass */
}
.glass-ios::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.10) 48%, rgba(255,255,255,0.04) 100%);
	opacity: 0.55;
}

.hidden { display: none; }

.center {
	display: grid;
	place-items: center;
	min-height: 100vh; /* allow taller content to scroll */
	overflow: auto;
}

button.primary {
	padding: 10px 18px;
	border-radius: 14px;
	border: 1px solid var(--glass-border);
	background: rgba(255,255,255,0.1);
	color: var(--text);
	cursor: pointer;
}

#landing {
    position: relative;
    width: min(900px, 92vw);
    height: auto;
    min-height: 420px;
}
#landing img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}

#hotspot {
    position: absolute;
    /* position relative to the actual image box */
    top: 6.5%;
    left: 44%;
    width: 12%;
    height: 12%;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    border: none;
}

.form-card { width: min(640px, 92vw); padding: 22px; overflow: hidden; }

.input {
	margin: 10px 0;
	padding: 12px 14px;
	border-radius: 16px;
	border: 1px solid var(--glass-border);
	background: rgba(255,255,255,0.08);
	color: var(--text);
	width: 100%;
}

.label { font-weight: 700; margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.small { opacity: 0.85; font-size: 14px; }

/* Row layout: keep link next to text and push checkbox to right */
.row { display: flex; align-items: center; gap: 12px; }
.ml-auto { margin-left: auto; }

.icon { width: 20px; height: 20px; }
.icon.invert { filter: invert(1); }
.icon.nobg { background: transparent; box-shadow: none; border: 0; }

a.link-inline { display: inline-flex; align-items: center; margin-left: 8px; line-height: 1; }
/* Make the inline link icon match text height and align to baseline */
a.link-inline img { width: 16px; height: 16px; display: block; }

.star-img { height: 18px; }

.canvas-wrap { width: min(760px, 92vw); }

/* Constrain result view to viewport to avoid background gradient split and center content */
#view-result {
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
#view-result.hidden { display: none !important; }
#view-result .canvas-wrap canvas {
    height: min(58vh, 56vw);
    width: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 600px) {
    /* fine-tune hotspot to match circle on narrow screens */
    #hotspot { top: 7.2%; left: 44.2%; width: 12.5%; height: 12.5%; }
    .form-card { width: 92vw; padding: 18px; }
}