/* LLT_Companion High-End Controller Styles - Mobile Optimized */

:root {
	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
	margin: 0;
	padding: 0;
	font-style: normal;
	list-style: none;
	vertical-align: top;
	box-sizing: border-box;
}

body {
	width: 100vw;
	height: 100vh; /* Strongly lock to exact height */
	font-family: var(--font-main);
	background-color: var(--color-bg-dark);
	color: var(--color-text);
	text-align: center;
	overflow: hidden; /* Force zero scrolling */
	position: fixed; /* Eliminate screen bounce on mobile */
	overscroll-behavior-y: none; /* Prevents pull-to-refresh bounce */
	-webkit-font-smoothing: antialiased;
}

button {
	-webkit-appearance: none;
	border: none;
	background: none;
	cursor: pointer;
	outline: none;
	touch-action: manipulation;
}

/* Header & Logo */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 8vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	padding: 1rem;
}

.logo-mini {
	font-weight: 800;
	font-size: clamp(0.75rem, 3.5vw, 1.1rem);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 0.6rem 1.8rem;
	border-radius: 50px;
    
	/* Opulent Deep Glass Base */
	background: linear-gradient(180deg, rgba(80, 85, 125, 0.3) 0%, rgba(30, 31, 46, 0.85) 100%);
	border: 1px solid rgba(108, 137, 253, 0.5); /* Signature Purple Trim */
	border-top: 1px solid rgba(255, 240, 219, 0.6); /* Highlights top edge */
    
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
    
	/* Floating Outer Glows & Inner Depth */
	box-shadow: 
		0 8px 25px rgba(0, 0, 0, 0.6),
		0 0 20px rgba(108, 137, 253, 0.35),
		inset 0 2px 10px rgba(255, 255, 255, 0.15);
}

.gold-text {
	/* Rich 3-Point Gold Gradient */
	background: linear-gradient(135deg, #ffffff 0%, var(--color-accent) 50%, #d5ab71 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* Crisp readability and halo glow */
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 240, 219, 0.5));
}

/* Layout Container */
#container {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem; /* Compress gap aggressively */
	padding-top: max(3vh, env(safe-area-inset-top));
	padding-bottom: max(5vh, env(safe-area-inset-bottom));
}

#main-interface {
	position: relative;
	width: min(88vw, 420px); 
	height: auto;
	padding: 1rem; /* Reclaim vertical space */
	border-radius: 20px;
	overflow: visible;
	display: flex;
	flex-direction: column;
}

#main-panel {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.8rem; /* Tighter grid padding to save vertical space */
	width: 100%;
	opacity: 0;
	transform: scale(0.95);
	transition: var(--transition);
	pointer-events: none;
}

/* Inline Panel Logo Container */
#main-panel .panel-logo-link {
    grid-column: span 2;
    display: flex;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#main-panel .panel-logo-link:hover {
    transform: scale(1.05) translateY(-2px);
    filter: brightness(1.2);
}
#main-panel .panel-logo {
    width: clamp(80px, 14vh, 180px); /* Height-dominant dynamic scaling */
    max-width: 45%; /* Safety width constraint */
    margin: 0 auto 0.4rem auto;
    display: block;
    filter: drop-shadow(0 0 16px rgba(108, 137, 253, 0.4));
    object-fit: contain;
}

body.loaded #main-panel {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

#main-panel .slot {
	position: relative;
	width: 100%;
	aspect-ratio: 1.7 / 1; /* Aggressive wider ratio flattens height dramatically while keeping width */
	border-radius: 12px;
	overflow: hidden;
	background: var(--color-bg-deep);
	border: 1px solid var(--glass-border);
}

/* SVG Icon Styling */
#main-panel .slot svg.icon {
    height: 48%; /* Scaled purely by height to prevent any distortion */
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transition);
}

#main-panel .slot svg.green {
    color: #4CAF50;
    filter: drop-shadow(0 0 16px rgba(76, 175, 80, 0.6));
}

#main-panel .slot svg.red {
    color: #fa6d47;
    filter: drop-shadow(0 0 16px rgba(250, 109, 71, 0.6));
}

/* Informative History Panel */
#info-panel {
    width: min(88vw, 420px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 1.4rem; /* Compact legend to save height */
    padding: 1rem;
    border-radius: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: var(--transition);
}

body.loaded #info-panel {
    opacity: 1;
    transform: translateY(0);
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-text-dim);
}

.info-item svg.icon {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

.info-item svg.green { color: #4CAF50; filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.4)); }
.info-item svg.red { color: #fa6d47; filter: drop-shadow(0 0 6px rgba(250, 109, 71, 0.4)); }
.info-item .tiny-knife { font-size: 14px; filter: drop-shadow(0 0 6px rgba(250, 109, 71, 0.4)); }
.info-item .tiny-heart { font-size: 14px; filter: drop-shadow(0 0 6px rgba(16, 219, 107, 0.4)); }

#main-panel button:active {
	transform: scale(0.95);
}

#main-panel button:active svg.icon {
	transform: translate(-50%, -50%) scale(1.1);
	filter: brightness(1.3) drop-shadow(0 0 20px currentColor);
}

/* Explicit hit-feedback triggered via JS */
#main-panel .slot.triggered {
    transform: scale(0.85);
    filter: brightness(1.8);
    box-shadow: inset 0 0 30px currentColor, 0 0 40px currentColor;
    background: rgba(255, 255, 255, 0.15);
    border-color: currentColor;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Special Action Buttons: Heal & Backstab */
#main-panel button.heal,
#main-panel button.backstab {
	grid-column: span 1; /* Now sitting elegantly side-by-side */
	height: clamp(3rem, 10vh, 4rem);
	margin-top: 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 12px;
	font-family: var(--font-main);
	letter-spacing: 1px;
	font-size: 0.85rem;
    transition: var(--transition);
    font-weight: 800;
}

/* Serious Gore Styles - Back Stab */
#main-panel button.backstab {
    background: linear-gradient(160deg, rgba(80, 5, 10, 0.75) 0%, rgba(30, 0, 2, 0.9) 100%);
    border: 1px solid rgba(180, 20, 20, 0.4);
    border-bottom: 2px solid rgba(100, 5, 5, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffeaea;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 16px rgba(220, 0, 0, 0.8);
    box-shadow: 
        inset 0 2px 20px rgba(180, 0, 0, 0.3),
        0 6px 15px rgba(0, 0, 0, 0.5);
}

/* Rejuvenation Styles - Heal */
#main-panel button.heal {
    background: linear-gradient(160deg, rgba(5, 80, 30, 0.75) 0%, rgba(0, 30, 10, 0.9) 100%);
    border: 1px solid rgba(20, 180, 60, 0.4);
    border-bottom: 2px solid rgba(5, 100, 20, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #eaffea;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 220, 50, 0.8);
    box-shadow: 
        inset 0 2px 20px rgba(0, 180, 40, 0.3),
        0 6px 15px rgba(0, 0, 0, 0.5);
}

#main-panel button.heal:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 20px rgba(0, 255, 50, 0.6);
}

#main-panel button.heal:active {
    transform: scale(0.95);
}

#main-panel button.heal.triggered {
    transform: scale(0.85);
    filter: brightness(1.8);
    box-shadow: 0 0 40px #00ff00, inset 0 0 30px #ffffff;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), filter 0.1s !important;
}

#main-panel button.backstab:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
}

#main-panel button.backstab:active {
    transform: scale(0.95);
}

#main-panel button.backstab.triggered {
    transform: scale(0.85);
    filter: brightness(1.8);
    box-shadow: 0 0 40px #ff0000, inset 0 0 30px #ffffff;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), filter 0.1s !important;
}

/* Back Stab & Heal Locked (Shared Cooldown Faded State) */
#main-panel button.heal.locked,
#main-panel button.backstab.locked {
    background: rgba(40, 40, 50, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    cursor: not-allowed;
	pointer-events: none;
    transform: scale(0.98);
    opacity: 0.6 !important;
    font-weight: 700;
    filter: none !important; /* Removed full grayscale to allow distinct muted text colors */
}

/* Specialized Locked Text States */
#main-panel button.heal.locked {
    color: rgba(60, 180, 80, 0.6) !important; /* Dimmed green */
}

#main-panel button.backstab.locked {
    color: rgba(220, 60, 60, 0.6) !important; /* Dimmed red */
}

/* Footer Credit */
.footer-credit {
	position: absolute;
    bottom: max(1.5vh, env(safe-area-inset-bottom)); /* Hugs literal bottom of screen to avoid info-panel entirely */
	width: 100%;
	font-size: 0.65rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-text-dim);
	pointer-events: auto; /* Corrected: Enable link clicks */
}

.text-gold {
	color: var(--color-accent);
	font-weight: 700;
}

/* Loader */
#loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	transition: opacity 0.5s;
}

body.loaded #loader {
	opacity: 0;
	pointer-events: none;
}

.circle-loader {
	stroke: var(--color-accent);
	stroke-width: 2;
	fill: none;
	stroke-dasharray: 90;
	stroke-dashoffset: 0;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
    #main-interface { 
        width: 94vw;
        padding: 1rem; 
        border-radius: 20px;
    }
    #main-panel { gap: 0.8rem; }
    .logo-mini { 
        font-size: 0.75rem; 
        padding: 0.4rem 1rem;
        letter-spacing: 0.1em;
    }
    .mobile-hide { display: none; }
    header { height: 6vh; padding: 0.5rem; }
    #main-panel .panel-logo {
        width: clamp(80px, 32%, 110px);
        margin-bottom: 0.2rem;
    }
}

@media (max-height: 650px) {
    #container { 
        padding-top: max(4vh, env(safe-area-inset-top)); 
        padding-bottom: max(6vh, env(safe-area-inset-bottom)); 
    }
    .logo-mini { display: none; }
}