/* PWA install badge + app startup */
.hero-product__badge {
	gap: 8px;
	flex-wrap: wrap;
}

.hero-install-btn {
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition:
		background 0.2s ease,
		transform 0.2s ease;
}

.hero-install-btn:hover {
	background: rgba(255, 255, 255, 0.24);
	transform: translateY(-1px);
}

.hero-install-btn[hidden] {
	display: none !important;
}

/* Riko startup only. Keep native Android splash background continuity. */
#tfpAppStartup {
    --tfp-startup-css: ready-riko-v1;
    position:fixed; inset:0; z-index:2147483647; isolation:isolate;
    display:grid; grid-template-rows:auto minmax(0,1fr) auto; justify-items:center;
    box-sizing:border-box; width:100%; height:100%; height:100dvh; margin:0;
    padding:max(28px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
    overflow:hidden; color:#f7fbff; background:#061725;
    font:400 16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    text-align:center; text-transform:none; letter-spacing:normal; -webkit-font-smoothing:antialiased;
    opacity:1; transition:opacity 180ms ease-out;
}
#tfpAppStartup[hidden] { display:none!important; }
#tfpAppStartup.is-leaving { opacity:0; }
html.tfp-app-starting { overflow:hidden; overscroll-behavior:none; }
#tfpAppStartup::before {
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at 48% 38%,#7435df32 0%,#7435df12 29%,transparent 62%),radial-gradient(ellipse at 76% 42%,#078b921a,transparent 55%);
}
#tfpAppStartup::after {
    content:""; position:absolute; inset:auto 0 0; height:34%; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg,#061725 0%,#06172570 52%,#061725b3 100%),url('/frontend/img/hero-premium/night-court.webp') center 65%/cover no-repeat;
    opacity:.5;
}
#tfpAppStartup .tfp-startup__brand { display:flex; align-items:center; justify-content:center; gap:9px; }
#tfpAppStartup .tfp-startup__mark { display:block; width:42px; height:27px; flex:none; }
#tfpAppStartup .tfp-startup__name { color:#f7fbff; font-size:17px; line-height:1.3; font-weight:650; letter-spacing:-.035em; }
#tfpAppStartup .tfp-startup__content { align-self:center; width:100%; max-width:780px; box-sizing:border-box; margin:0; padding:8px 0 16px; }
#tfpAppStartup .tfp-startup__court { position:relative; width:clamp(252px,80vw,360px); max-width:100%; aspect-ratio:1020/1060; margin:0 auto 14px; pointer-events:none; user-select:none; }
#tfpAppStartup .tfp-startup__riko { display:block; width:100%; height:100%; overflow:visible; visibility:hidden; }
#tfpAppStartup.has-riko .tfp-startup__riko { visibility:visible; }
#tfpAppStartup .tfp-startup__fallback { position:absolute; inset:0; display:grid; place-items:center; color:#f7fbff; }
#tfpAppStartup .tfp-startup__fallback svg { display:block; width:100px; max-width:35%; height:auto; filter:drop-shadow(0 0 24px #7435df45); }
#tfpAppStartup.has-riko .tfp-startup__fallback { display:none; }
#tfpAppStartup .tfp-startup__title { margin:0; color:#f7fbff; font-size:clamp(27px,7.2vw,46px); font-weight:700; line-height:1.18; letter-spacing:-.045em; text-wrap:balance; }
#tfpAppStartup .tfp-startup__title span { display:block; margin-top:5px; color:#bd9dff; }
#tfpAppStartup .tfp-startup__features { margin:16px 0 0; color:#b8c5d5; font-size:clamp(12px,3.35vw,16px); font-weight:400; line-height:1.5; }
#tfpAppStartup .tfp-startup__status { margin:26px 0 0; color:#a6b6c9; font-size:12px; font-weight:400; line-height:1.5; }
#tfpAppStartup .tfp-startup__status::before { content:""; display:block; width:32px; height:3px; margin:0 auto 14px; background:#a379ff; border-radius:2px; box-shadow:0 0 14px #7435df60; animation:tfp-riko-ready 1.36s ease-in-out infinite; }
#tfpAppStartup .tfp-startup__site { color:#94a7bc; font-size:11px; line-height:1.4; letter-spacing:.055em; }
@keyframes tfp-riko-ready { 0%,100% { opacity:.45; transform:scaleX(.65); } 50% { opacity:1; transform:scaleX(1); } }
@media(min-width:768px) {
    #tfpAppStartup { padding-top:max(38px,env(safe-area-inset-top)); }
    #tfpAppStartup .tfp-startup__name { font-size:19px; }
    #tfpAppStartup .tfp-startup__court { width:340px; margin-bottom:18px; }
}
@media(max-height:740px) {
    #tfpAppStartup { padding-top:max(20px,env(safe-area-inset-top)); padding-bottom:max(16px,env(safe-area-inset-bottom)); }
    #tfpAppStartup .tfp-startup__court { width:clamp(216px,64vw,274px); margin-bottom:8px; }
    #tfpAppStartup .tfp-startup__title { font-size:clamp(25px,6.4vw,34px); }
    #tfpAppStartup .tfp-startup__features { margin-top:12px; }
    #tfpAppStartup .tfp-startup__status { margin-top:18px; }
    #tfpAppStartup .tfp-startup__status::before { margin-bottom:9px; }
}
@media(max-height:550px) {
    #tfpAppStartup .tfp-startup__court { width:178px; }
    #tfpAppStartup .tfp-startup__title { font-size:24px; }
    #tfpAppStartup .tfp-startup__features { margin-top:8px; font-size:12px; }
    #tfpAppStartup .tfp-startup__status { margin-top:12px; }
}
@media(max-height:640px) and (max-width:579px) {
    #tfpAppStartup .tfp-startup__court { width:180px; }
    #tfpAppStartup .tfp-startup__content { padding:4px 0 8px; }
    #tfpAppStartup .tfp-startup__title { font-size:24px; }
}
@media(max-height:550px) and (max-width:579px) {
    #tfpAppStartup .tfp-startup__court { width:160px; }
}
@media(max-height:500px) and (max-width:579px) {
    #tfpAppStartup .tfp-startup__court { width:140px; }
    #tfpAppStartup .tfp-startup__content { padding:0; }
    #tfpAppStartup .tfp-startup__features { margin-top:6px; font-size:11px; }
    #tfpAppStartup .tfp-startup__status { margin-top:10px; }
    #tfpAppStartup .tfp-startup__status::before { display:none; }
}
@media(max-height:500px) and (min-width:580px) {
    #tfpAppStartup .tfp-startup__content { display:grid; grid-template-columns:200px minmax(0,1fr); align-items:center; gap:0 28px; max-width:680px; padding:0; text-align:left; }
    #tfpAppStartup .tfp-startup__court { grid-row:1/4; width:200px; margin:0; }
    #tfpAppStartup .tfp-startup__title { align-self:end; font-size:28px; }
    #tfpAppStartup .tfp-startup__features { align-self:start; margin-top:12px; }
    #tfpAppStartup .tfp-startup__status { margin-top:12px; }
    #tfpAppStartup .tfp-startup__status::before { display:none; }
}
@media(prefers-reduced-motion:reduce) {
    #tfpAppStartup { transition:none; }
    #tfpAppStartup .tfp-startup__status::before { animation:none; }
}