:root{
	--bg-0:#07070a;
	--bg-1:#0d0f14;
	--bg-2:#121622;

	--text:#f2f4f8;
	--muted:#b8c0cc;

	--accent:#ff2d55;
	--accent-2:#9b5cff;

	--card:rgba(18,22,34,.72);
	--border:rgba(255,255,255,.10);
	--shadow:0 18px 60px rgba(0,0,0,.55);
}

.site-body{
	background:linear-gradient(180deg,var(--bg-0),var(--bg-1));
	color:var(--text);
}

.site-header .navbar{
	background:rgba(7,7,10,.65);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--border);
}

.navbar-brand{
	letter-spacing:.08em;
	text-transform:uppercase;
}

.brand-mark{
	color:var(--text);
}

.brand-sub{
	color:var(--muted);
	font-weight:600;
	margin-left:.5rem;
}

.hero{
	position:relative;
	min-height:82vh;
	display:flex;
	align-items:stretch;
}

.hero-bg{
	position:absolute;
	inset:0;
	overflow:hidden;
}

.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{
	height:100%;
}

.hero-carousel{
	position:relative;
	z-index:1;
}

.hero-img{
	height:82vh;
	min-height:560px;
	object-fit:cover;
	filter:contrast(1.05) saturate(1.05);
	transform:scale(1.02);
}

.hero-overlay{
	position:absolute;
	inset:0;
	background:
		linear-gradient(90deg,
			rgba(0,0,0,.65) 0%,
			rgba(0,0,0,.45) 45%,
			rgba(0,0,0,.25) 100%
		),
		linear-gradient(180deg,
			rgba(0,0,0,.20) 0%,
			rgba(0,0,0,.45) 60%,
			rgba(0,0,0,.60) 100%
		);
	backdrop-filter:blur(1px);
	pointer-events:none;
	z-index:2;
}

.hero-content{
	position:relative;
	z-index:2;
	padding-top:6rem;
	padding-bottom:4.5rem;
}

.hero-kicker{
	display:inline-block;
	padding:.35rem .7rem;
	border:1px solid var(--border);
	background:rgba(0,0,0,.35);
	border-radius:5%;
	color:var(--muted);
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
	text-align:center;
}

.hero-title{
	font-size:clamp(2.2rem,4.2vw,3.6rem);
	line-height:1.05;
	margin-top:1rem;
	text-shadow:0 10px 30px rgba(0,0,0,.55);
}

.hero-lead{
	color:var(--muted);
	font-size:1.15rem;
	max-width:52ch;
	margin-top:1rem;
}

.hero-panel{
	background:rgba(0,0,0,.38);
	border:1px solid rgba(255,255,255,.12);
	border-radius:18px;
	padding:1.25rem;
	box-shadow:0 18px 60px rgba(0,0,0,.60);
	backdrop-filter:blur(6px);
}

.hero-title,
.hero-lead{
	text-shadow:0 10px 30px rgba(0,0,0,.70);
}

.hero-kicker{
	background:rgba(0,0,0,.55);
	border-color:rgba(255,255,255,.16);
}

@media (max-width: 768px){
	.hero-overlay{
		background:
			linear-gradient(180deg,
				rgba(0,0,0,.35) 0%,
				rgba(0,0,0,.65) 100%
			);
	}
}

.btn-cta-primary{
	background:linear-gradient(90deg,var(--accent),var(--accent-2));
	border:0;
	color:#fff;
	box-shadow:0 10px 30px rgba(255,45,85,.20);
}

.btn-cta-primary:hover{
	filter:brightness(1.06);
	color:#fff;
}

.btn-cta-outline{
	border:1px solid rgba(255,255,255,.25);
	background:rgba(0,0,0,.25);
	color:var(--text);
}

.btn-cta-outline:hover{
	border-color:rgba(255,255,255,.4);
	background:rgba(0,0,0,.35);
	color:var(--text);
}

.btn-cta-secondary{
	background:rgba(255,255,255,.10);
	border:1px solid var(--border);
	color:var(--text);
}

.btn-dark-soft{
	background:rgba(0,0,0,.35);
	border:1px solid var(--border);
	color:var(--text);
}

.badge-rock{
	background:rgba(0,0,0,.35);
	border:1px solid var(--border);
	color:var(--text);
	padding:.55rem .75rem;
	border-radius:999px;
	font-weight:600;
}

.hero-card{
	position:relative;
	background:var(--card);
	border:1px solid var(--border);
	border-radius:18px;
	padding:1.25rem 1.25rem 1.1rem;
	box-shadow:var(--shadow);
}

.hero-card-image {
	width: 80px;     
	height: 110px;     
	flex-shrink: 0;   
}

.hero-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.hero-card-image img {
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

@media (max-width: 575px) {
	.hero-card {
		flex-direction: column;
	}
	.hero-card-image {
		width: 100%;
		margin-top: 12px;
	}
	.hero-card-image img {
		aspect-ratio: 16 / 9;
	}
}

.hero-card-title{
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.hero-card-text{
	color:var(--muted);
	margin-top:.5rem;
}

.section-pad{
	padding:4.5rem 0;
}

.section-dark{
	background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
	border-top:1px solid var(--border);
	border-bottom:1px solid var(--border);
}

.section-darker{
	background:linear-gradient(180deg,var(--bg-2),#0b0d12);
	border-bottom:1px solid var(--border);
}

.section-title{
	font-weight:900;
	letter-spacing:.02em;
}

.section-subtitle{
	color:var(--muted);
	max-width:70ch;
}

.placeholder-box{
	margin-top:1.5rem;
	padding:1.25rem;
	border:1px dashed rgba(255,255,255,.22);
	border-radius:16px;
	background:rgba(0,0,0,.2);
}

.placeholder-line{
	height:14px;
	border-radius:999px;
	background:rgba(255,255,255,.10);
	margin-bottom:12px;
}

.placeholder-line.short{
	width:55%;
}

.contact-form .form-control{
	background:rgba(0,0,0,.30);
	border:1px solid rgba(255,255,255,.15);
	color:var(--text);
}

.contact-form .form-control:focus{
	border-color:rgba(255,45,85,.55);
	box-shadow:0 0 0 .25rem rgba(255,45,85,.12);
}

.form-notice{
	border:1px solid var(--border);
	background:rgba(0,0,0,.35);
	padding:.75rem .9rem;
	border-radius:12px;
	color:var(--muted);
}

.info-card{
	background:rgba(0,0,0,.28);
	border:1px solid var(--border);
	border-radius:18px;
	padding:1.25rem;
	box-shadow:var(--shadow);
}

.info-title{
	font-weight:800;
}

.info-text{
	color:var(--muted);
	margin-top:.5rem;
}

.event-title-big {
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.hero-card-text {
	margin-top: 4px;
}

.event-desc {
	margin-top: 6px;
	color: #555;
}

.hero-badge {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: rgba(0,0,0,.08);
	color: #222;
}

/* Kortti: hieman sävytetty tumma */
.section-dark .hero-card {
	background: linear-gradient(
		135deg,
		rgba(40,60,90,.45),
		rgba(25,35,55,.55)
	);
	border: 1px solid rgba(120,160,220,.18);
}

/* Title */
.section-dark .hero-card-title,
.section-dark .event-title-big {
	color: rgba(235,245,255,.95);
}

/* Kuvaus – pehmeä, ei harmaa */
.section-dark .event-desc {
	color: rgba(215,230,245,.85);
}

/* Badge: värillinen mutta hillitty */
.section-dark .hero-badge {
	background: rgba(90,130,200,.35);
	color: #eef3ff;
	border: 1px solid rgba(120,160,220,.45);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Badge-teksti */
.section-dark .hero-badge {
	font-weight: 700;
	letter-spacing: .05em;
}

/* Kuva: kevyt värireunus */
.section-dark .hero-card-image img {
	border: 1px solid rgba(120,160,220,.35);
}




/* ===========================
	ROCK BUTTONS (NO REACTION)
	- no hover
	- no active darkening
	- no focus ring
=========================== */

.btn.btn-rock-primary,
.btn.btn-rock-secondary{
	--btn-bg:transparent;
	--btn-fg:#fff;

	background:var(--btn-bg) !important;
	color:var(--btn-fg) !important;

	border:0 !important;
	outline:0 !important;
	box-shadow:none !important;
	text-decoration:none !important;

	transition:none !important;
	filter:none !important;
	transform:none !important;
}

/* Lock ALL states */
.btn.btn-rock-primary:hover,
.btn.btn-rock-primary:focus,
.btn.btn-rock-primary:focus-visible,
.btn.btn-rock-primary:active,
.btn.btn-rock-primary:visited,
.btn.btn-rock-primary:disabled,
.btn.btn-rock-secondary:hover,
.btn.btn-rock-secondary:focus,
.btn.btn-rock-secondary:focus-visible,
.btn.btn-rock-secondary:active,
.btn.btn-rock-secondary:visited,
.btn.btn-rock-secondary:disabled{
	background:var(--btn-bg) !important;
	color:var(--btn-fg) !important;

	border:0 !important;
	outline:0 !important;
	box-shadow:none !important;

	transition:none !important;
	filter:none !important;
	transform:none !important;
	text-decoration:none !important;
}

/* Primary (darker red gradient) */
.btn.btn-rock-primary{
	--btn-bg:linear-gradient(135deg,#9b1c2d 0%,#b32638 50%,#7a1422 100%);
	--btn-fg:#ffffff;

	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
	padding:.9rem 1.6rem;
	border-radius:14px;

	-webkit-tap-highlight-color:transparent;
}

/* Secondary (dark violet/charcoal gradient) */
.btn.btn-rock-secondary{
	--btn-bg:linear-gradient(135deg,#2a2433 0%,#1e1a26 55%,#14111a 100%);
	--btn-fg:#f1ecff;

	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	padding:.9rem 1.6rem;
	border-radius:14px;

	-webkit-tap-highlight-color:transparent;
}

/* ===========================
	SOCIAL ICONS – DARK BRAND
=========================== */

.social-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:44px;
	height:44px;

	border-radius:50%;
	text-decoration:none;

	font-size:1.25rem;
	color:#fff;

	border:0;
	box-shadow:none;
	transition:none;
}

/* Facebook – tumma sininen */
.social-facebook{
	background:linear-gradient(
		135deg,
		#1f3a63 0%,
		#162a47 60%,
		#0f1f36 100%
	);
}

/* Instagram – tumma brand gradient */
.social-instagram{
	background:linear-gradient(
		135deg,
		#5a2d6f 0%,
		#8a2c5e 45%,
		#b0304f 70%,
		#7a1f3a 100%
	);
}

/* Lock all states – absolutely no reaction */
.social-icon:hover,
.social-icon:focus,
.social-icon:focus-visible,
.social-icon:active,
.social-icon:visited{
	background:inherit !important;
	color:#fff !important;
	box-shadow:none !important;
	filter:none !important;
	transform:none !important;
	text-decoration:none !important;
	outline:0 !important;
}

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
}


#logo a {
	float: left;
    font-size: .8em;
    display: initial;
    margin: 0;
    letter-spacing: 1px;
    color: #7b0408;
    font-weight: 600;
    padding: 3px 0;
    border: none;
}
#logo a span.fa {
    color: #7b0408;
}


/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	}

/* Styling the links */
nav a {
    color: #7b0408;
    text-transform: capitalize;
    letter-spacing: 1px;
    padding-left: 0;
    padding-right: 0;
	padding: 10px 0;
    font-weight: 800;
}


nav ul li ul li:hover { background: #7b0408; }

/* Background color change on Hover */
nav a:hover { 
	color: #7b0408;
}
.menu li.active  a{ 
	color: #7b0408;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 30px; 
    background: #7b0408;
    padding: 10px;
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}
nav ul ul li a {
    color: #333;
    padding: 5px 10px;
    display: block;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

nav img {
	/*width: 240px;
	margin: 0 2px 0 2px;
	border: 1px solid #0505a2;
	border-radius: 4px;*/
	width: 240px;
}

/* Change ' +' in order to change the Dropdown symbol */
li > a:only-child:after { content: ''; }

.thumb {
	width: 72px;
	height: 44px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
	border: 1px solid rgba(0,0,0,.12);
	background: #fff;
}

.thumb.placeholder {
	background: rgba(0,0,0,.06);
}

.preview-wrap {
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 12px;
	padding: 10px;
	background: #fff;
}

.preview-img {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

/* ===========================
	HISTORY SECTION
=========================== */

.history-card{
	background:rgba(0,0,0,.25);
	border:1px solid rgba(255,255,255,.10);
	border-radius:18px;
	box-shadow:0 18px 60px rgba(0,0,0,.50);
	padding:1rem;
}

.history-scroll{
	max-height:360px;
	overflow:auto;
	padding:.75rem .75rem;
	border-radius:14px;
	background:rgba(0,0,0,.25);
}

.history-list{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:.65rem;
}

.history-list li{
	display:flex;
	gap:.85rem;
	align-items:flex-start;
}

.history-year{
	min-width:64px;
	font-weight:900;
	letter-spacing:.06em;
	color:rgba(255,255,255,.85);
}

.history-text{
	color:rgba(255,255,255,.70);
}

/* Mobiili: hieman matalampi scroll-laatikko */
@media (max-width: 768px){
	.history-scroll{
		max-height:280px;
	}
}

/* ===========================
	GIG MODAL (ROCK)
=========================== */

.modal-rock{
	background:linear-gradient(180deg, rgba(16,16,20,.98), rgba(10,10,14,.98));
	border:1px solid rgba(255,255,255,.10);
	border-radius:18px;
	box-shadow:0 30px 120px rgba(0,0,0,.70);
	color:rgba(255,255,255,.92);
}

.modal-rock-header,
.modal-rock-footer{
	border-color:rgba(255,255,255,.10);
}

.modal-rock .form-control{
	background:rgba(0,0,0,.30);
	border:1px solid rgba(255,255,255,.14);
	color:#fff;
}

.modal-rock .form-control:focus{
	border-color:rgba(255,255,255,.22);
	box-shadow:none;
	outline:0;
}

.form-hint{
	margin-top:.35rem;
	color:rgba(255,255,255,.55);
	font-size:.95rem;
}

/* "Avaa lomake tästä" -linkki ilman hover-efektiä */
.open-gig-modal{
	color:rgba(255,255,255,.80);
	text-decoration:underline;
	text-decoration-thickness:2px;
	text-underline-offset:3px;
	transition:none;
}

.open-gig-modal:hover,
.open-gig-modal:focus,
.open-gig-modal:active,
.open-gig-modal:visited{
	color:rgba(255,255,255,.80);
	text-decoration:underline;
	filter:none;
	transform:none;
	outline:0;
	box-shadow:none;
}

.hp-wrap{
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* ===========================
	CONTACT SECTION
=========================== */

.contact-address{
	border:1px solid rgba(255,255,255,.10);
	background:rgba(0,0,0,.22);
	border-radius:18px;
	padding:1rem 1.1rem;
}

.contact-address-title{
	font-weight:900;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:rgba(255,255,255,.85);
}

.contact-address-text{
	margin-top:.35rem;
	color:rgba(255,255,255,.70);
}

.map-card{
	border:1px solid rgba(255,255,255,.10);
	background:rgba(0,0,0,.22);
	border-radius:18px;
	padding:1rem;
	box-shadow:0 18px 60px rgba(0,0,0,.50);
}

.map-card-title{
	font-weight:900;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:rgba(255,255,255,.85);
	margin-bottom:.75rem;
}

.map-embed{
	border-radius:16px;
	overflow:hidden;
	border:1px solid rgba(255,255,255,.10);
	background:rgba(0,0,0,.25);
}

.map-embed iframe{
	display:block;
	width:100%;
	height:420px;
	border:0;
}

@media (max-width: 768px){
	.map-embed iframe{
		height:320px;
	}
}

/* ===========================
	FOOTER
=========================== */

.site-footer{
	background:linear-gradient(180deg, rgba(10,10,14,.95), rgba(6,6,9,.98));
	border-top:1px solid rgba(255,255,255,.10);
	padding:3rem 0 1.5rem;
	color:rgba(255,255,255,.80);
}

.footer-brand{
	display:flex;
	flex-direction:column;
	gap:.5rem;
}

.footer-logo{
	font-weight:900;
	letter-spacing:.12em;
	text-transform:uppercase;
	font-size:1.2rem;
}

.footer-tagline{
	color:rgba(255,255,255,.60);
	font-size:.95rem;
}

.footer-block{
	display:flex;
	flex-direction:column;
	gap:.5rem;
}

.footer-title{
	font-weight:900;
	letter-spacing:.08em;
	text-transform:uppercase;
	font-size:.9rem;
	color:rgba(255,255,255,.85);
}

.footer-text{
	color:rgba(255,255,255,.65);
	line-height:1.6;
}

.footer-social{
	margin-top:.25rem;
}

.footer-bottom{
	margin-top:2.5rem;
	padding-top:1rem;
	border-top:1px solid rgba(255,255,255,.08);
	display:flex;
	justify-content:center;
}

.footer-copy{
	color:rgba(255,255,255,.45);
	font-size:.9rem;
	text-align:center;
}

/* Onnenpyörä – runko */
.wheel-wrap{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:14px;
	border:1px solid var(--border);
	border-radius:18px;
	background:rgba(0,0,0,.22);
	box-shadow:var(--shadow);
}

#wheelCanvas{
	width:100%;
	max-width:560px;
	height:auto;
	display:block;
}

.wheel-arrow{
	position:absolute;
	top:6px;
	left:50%;
	transform:translateX(-50%);
	width:54px;
	height:78px;
	z-index:5;
	pointer-events:none;
	transform-origin:50% 8%;
}

.wheel-arrow-tip{
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:0;
	height:0;
	border-left:16px solid transparent;
	border-right:16px solid transparent;
	border-top:26px solid rgba(255,255,255,.92);
	filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
}

.wheel-arrow-body{
	position:absolute;
	top:24px;
	left:50%;
	transform:translateX(-50%);
	width:12px;
	height:44px;
	border-radius:8px;
	background:rgba(255,255,255,.55);
	box-shadow:0 10px 18px rgba(0,0,0,.30);
}

.wheel-arrow.is-click{
	animation:wheelArrowClick 120ms ease-out;
}

@keyframes wheelArrowClick{
	0%{ transform:translateX(-50%) rotate(0deg); }
	35%{ transform:translateX(-50%) rotate(-10deg); }
	100%{ transform:translateX(-50%) rotate(0deg); }
}

/* Popup */
.win-popup{
	position:fixed;
	inset:0;
	display:none;

	/* keskelle */
	align-items:center;
	justify-content:center;

	padding:18px;
	z-index:9999;

	/* overlay */
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(2px);

	/* nyt overlay voi ottaa klikin (ja halutessa sulkea taustaklikillä) */
	pointer-events:auto;
}

.win-popup.is-open{
	display:flex;
}

.win-popup-inner{
	width:min(520px, 100%);
	border-radius:18px;
	padding:16px 16px 14px;
	background:rgba(10,10,10,.92);
	border:1px solid rgba(255,255,255,.14);
	box-shadow:0 20px 60px rgba(0,0,0,.65);
	backdrop-filter:blur(10px);
	color:#fff;
	position:relative;
	transform: scale(.96);
	opacity:0;
	animation: winIn 520ms cubic-bezier(.2,.8,.2,1) forwards;
	pointer-events:auto;
	overflow:hidden;
}

@keyframes winIn{
	to{
		transform: scale(1);
		opacity:1;
	}
}

.win-close{
	position:absolute;
	top:10px;
	right:10px;
	width:36px;
	height:36px;
	border-radius:10px;
	border:1px solid rgba(255,255,255,.14);
	background:rgba(255,255,255,.06);
	color:#fff;
	font-size:22px;
	line-height:1;
	cursor:pointer;
}

.win-badge{
	display:inline-block;
	padding:6px 10px;
	border-radius:999px;
	font-weight:800;
	letter-spacing:.5px;
	background:rgba(107,198,240,.18);
	border:1px solid rgba(107,198,240,.35);
	margin-bottom:10px;
}

.win-title{
	font-size:20px;
	font-weight:900;
	margin-bottom:2px;
}

.win-sub{
	opacity:.85;
	margin-bottom:12px;
}

.win-code-wrap{
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px;
	border-radius:14px;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.10);
}

.win-code{
	flex:1;
	font-size:22px;
	font-weight:900;
	letter-spacing:1px;
	font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.win-copy{
	border-radius:12px;
	border:1px solid rgba(255,255,255,.16);
	background:rgba(255,255,255,.10);
	color:#fff;
	padding:10px 12px;
	font-weight:800;
	cursor:pointer;
}

.win-foot{
	margin-top:10px;
	opacity:.85;
}

.win-popup-inner.is-glow{
	animation:
		winIn 520ms cubic-bezier(.2,.8,.2,1) forwards,
		winGlow 1100ms ease-out;
}

@keyframes winGlow{
	0%{ box-shadow:0 20px 60px rgba(0,0,0,.65), 0 0 0 rgba(107,198,240,0); }
	35%{ box-shadow:0 20px 60px rgba(0,0,0,.65), 0 0 42px rgba(107,198,240,.45); }
	100%{ box-shadow:0 20px 60px rgba(0,0,0,.65), 0 0 0 rgba(107,198,240,0); }
}

/* Confetti container: keskelle */
.win-confetti{
	position:absolute;
	inset:0;
	pointer-events:none;
	overflow:hidden;
}

/* Partikkeli: syntyy keskelle ja lentää ulospäin */
.win-confetti i{
	position:absolute;
	left:50%;
	top:40%;

	width:10px;
	height:14px;
	border-radius:3px;
	opacity:.95;

	/* Lähtöpiste keskelle */
	transform: translate(-50%, -50%) rotate(0deg);

	/* Liikerata tulee JS:stä CSS-muuttujina */
	animation: confettiBurst var(--dur, 900ms) cubic-bezier(.12,.8,.2,1) forwards;
	animation-delay: var(--delay, 0ms);

	background: rgba(107,198,240,.95);
}

@keyframes confettiBurst{
	0%{
		transform: translate(-50%, -50%) translate(0px, 0px) rotate(0deg) scale(1);
		opacity: 1;
	}
	70%{
		opacity: 1;
	}
	100%{
		transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.9);
		opacity: 0;
	}
}

.wheel-container{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:40px;
}

.wheel-controls{
	display:flex;
	flex-direction:column;
	gap:15px;
}

#wheelSpinBtn,
#wheelResetBtn{
	width:180px;
}

.wheel-actions{
	display:flex;
	justify-content:center;		/* mobiili: keskelle */
	margin-bottom:12px;
}

@media (min-width: 992px){
	.wheel-actions{
		justify-content:flex-start;	/* desktop: vasemmalle */
		margin-bottom:18px;
	}
}

/* optional: vähän “premium” napille */
#wheelSpinBtn{
	padding:12px 26px;
	border-radius:999px;
	font-weight:700;
}

.btn-share-icon{
	width:40px;
	height:40px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:999px;
	border:1px solid var(--border);
	background:rgba(255,255,255,.08);
	color:var(--text);
	padding:0;
	transition:all .18s ease;
}

.btn-share-icon:hover{
	background:rgba(255,255,255,.16);
	color:#fff;
	transform:translateY(-1px);
}

.share-modal{
	background:linear-gradient(180deg, rgba(20,20,24,.98) 0%, rgba(10,10,14,.98) 100%);
	border:1px solid rgba(255,255,255,.10);
	border-radius:20px;
	box-shadow:0 20px 60px rgba(0,0,0,.45);
	color:#fff;
}

.share-event-title{
	font-size:1.05rem;
	font-weight:700;
	margin-bottom:1rem;
	color:#fff;
}

.share-grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:12px;
}

.share-option{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:100px;
	border-radius:16px;
	border:1px solid rgba(255,255,255,.08);
	background:rgba(255,255,255,.04);
	color:#fff;
	text-decoration:none;
	transition:all .18s ease;
	padding:16px 12px;
}

.share-option:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.08);
	color:#fff;
}

.share-option i{
	font-size:1.5rem;
	line-height:1;
}

.share-option span{
	font-size:.95rem;
	font-weight:600;
}

.share-copy{
	width:100%;
	cursor:pointer;
}

.share-copy-status{
	margin-top:14px;
	padding:10px 12px;
	border-radius:12px;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.08);
	font-size:.92rem;
	color:#d7ffd9;
}

.share-facebook:hover{
	box-shadow:0 8px 24px rgba(255,255,255,.06);
}

.share-whatsapp:hover{
	box-shadow:0 8px 24px rgba(255,255,255,.06);
}

.share-sms:hover{
	box-shadow:0 8px 24px rgba(255,255,255,.06);
}

@media (max-width: 575px){
	.share-grid{
		grid-template-columns:1fr;
	}
}

.btn-share-event{
	display:inline-flex;
	align-items:center;
	gap:6px;
}

.btn-share-event i{
	font-size:.8rem;
}