:root {
            --font-display: 'Cinzel Decorative', cursive;
            --font-body: 'Roboto', sans-serif;
            --color-primary: #a12a2a; /* A deeper, more regal red */
            --color-primary-dark: #7a1f1f;
            --color-accent: #e0c280; /* A brighter, more metallic gold */
            --color-accent-dark: #c9a86a;
            --color-text-light: #f5eadd; /* Creamy parchment */
            --color-text-dark: #3d2b1f; /* Dark wood/leather */
            --color-bg-dark: #120e0a; /* Very dark brown, almost black */
        }
        html { scroll-behavior: smooth; }
        body {
            font-family: var(--font-body);
            background-color: var(--color-bg-dark);
            color: var(--color-text-light);
            margin: 0;
            overflow-x: hidden;
        }
        .font-display { font-family: var(--font-display); }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
        .background-master {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -2;
            background-image: url('https://travian.ptrmc.cz/img/background.png');
            background-size: cover;
            background-position: center;
        }
        .background-vignette {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.85) 100%);
        }
        .content-section {
            padding: 4rem 0;
            position: relative;
        }
        @media (min-width: 768px) { .content-section { padding: 6rem 0; } }
        .section-title {
            font-family: var(--font-display);
            font-size: 2rem;
            text-align: center;
            margin-bottom: 2rem;
            color: var(--color-accent);
            text-shadow: 0 0 8px var(--color-accent);
        }
        @media (min-width: 768px) { .section-title { font-size: 2.5rem; margin-bottom: 3rem; } }
        .header {
            background: rgba(18, 14, 10, 0.95);
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            z-index: 50;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        .header-logo {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: var(--color-accent);
            text-shadow: 0 0 10px var(--color-accent);
        }
        @media (min-width: 768px) { .header-logo { font-size: 1.75rem; } }
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            padding: 1rem;
        }
        .hero-content {
            max-width: 800px;
            animation: fadeIn 1.5s ease-out forwards;
        }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .hero-title {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 10vw, 5rem);
            color: #fff;
            text-shadow: 0 0 5px #fff, 0 0 15px var(--color-accent), 0 0 30px var(--color-primary);
            margin-bottom: 1rem;
        }
        .hero-subtitle {
            font-size: clamp(1rem, 4vw, 1.25rem);
            color: var(--color-text-light);
            max-width: 600px;
            margin: 0 auto 2.5rem;
            line-height: 1.6;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
        }
        .btn {
            display: inline-block;
            font-weight: 500;
            text-decoration: none;
            text-align: center;
            border-radius: 6px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
        }
        .btn-primary {
            font-family: var(--font-display);
            padding: 1rem 2rem;
            font-size: 1.25rem;
            color: #fff;
            background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));
            border-color: var(--color-primary-dark);
            box-shadow: 0 5px 20px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.2);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
        }
        @media (min-width: 768px) { .btn-primary { padding: 1rem 3rem; font-size: 1.5rem; } }
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.3);
            background: linear-gradient(145deg, #c0392b, var(--color-primary));
        }
        .btn-primary::after {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shimmer 2s infinite;
        }
        @keyframes shimmer { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } }
        .btn-nav {
            font-family: var(--font-body); padding: 0.5rem 1.25rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px;
            color: var(--color-text-light); background: transparent; border-color: rgba(224, 194, 128, 0.4);
        }
        .btn-nav:hover { background: rgba(224, 194, 128, 0.15); border-color: var(--color-accent); color: #fff; }
        .lang-dropdown { position: relative; }
        .lang-dropdown-button {
            display: inline-flex; align-items: center; padding: 0.5rem 0.75rem; font-size: 0.9rem; color: var(--color-text-light);
            background: transparent; border: 2px solid rgba(224, 194, 128, 0.4); border-radius: 6px; transition: all 0.3s ease;
        }
        .lang-dropdown-button:hover { background: rgba(224, 194, 128, 0.15); border-color: var(--color-accent); }
        .lang-dropdown-button img { border-radius: 2px; margin-right: 0.5rem; }
        .lang-dropdown-panel {
            position: absolute; right: 0; top: 100%; margin-top: 0.5rem; background: var(--color-bg-dark);
            border: 1px solid var(--color-accent-dark); border-radius: 6px; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            z-index: 10; width: 150px; overflow: hidden;
        }
        .lang-dropdown-item { display: flex; align-items: center; padding: 0.75rem 1rem; color: var(--color-text-light); text-decoration: none; transition: background-color 0.2s ease; }
        .lang-dropdown-item:hover { background-color: rgba(224, 194, 128, 0.1); }
        .lang-dropdown-item img { border-radius: 2px; margin-right: 0.75rem; }
        .info-box {
            background: rgba(0,0,0,0.4); padding: 2rem; border: 1px solid rgba(224, 194, 128, 0.2);
            border-radius: 8px; backdrop-filter: blur(8px);
        }
        @media (min-width: 768px) { .info-box { padding: 3rem; } }
        
        .hero::after {
            content: '';
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.75rem;
            letter-spacing: 3px;
            color: rgba(224, 194, 128, 0.5);
            animation: bounce 2s infinite ease-in-out;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
            40% { transform: translate(-50%, -15px); }
            60% { transform: translate(-50%, -7px); }
        }
		.error {
            color: #f00000;
            padding: 1rem; margin-top: 1.5rem; text-align: center;
        }

		/* --- Tribe & Position Selection --- */
        .selection-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
        @media (min-width: 640px) { .selection-grid { grid-template-columns: 1fr 1fr; } }
        .selection-box h3 {
            font-family: var(--font-display); color: var(--color-accent); margin-bottom: 1rem;
            text-align: center; font-size: 1.25rem;
        }
        .radio-label {
            display: block; padding: 0.75rem; border: 1px solid var(--color-accent-dark);
            border-radius: 4px; margin-bottom: 0.5rem; cursor: pointer; transition: all 0.3s ease;
        }
        .radio-label:hover { background: rgba(168, 212, 230, 0.1); }
        input[type="radio"] { display: none; }
        input[type="radio"]:checked + .radio-label {
            background: var(--color-accent); color: var(--color-text-dark);
            border-color: var(--color-accent-dark);
            box-shadow: 0 0 10px rgba(168, 212, 230, 0.5);
        }	

        /* --- Community & Countdown Section --- */
        .community-section {
            background: radial-gradient(circle at 50% 0%, rgba(224, 194, 128, 0.1), transparent 70%);
            border-top: 1px solid rgba(224, 194, 128, 0.2);
            border-bottom: 1px solid rgba(224, 194, 128, 0.2);
        }
        .community-box { text-align: center; }
        .community-box .section-title { margin-bottom: 1rem; }
        .community-text {
            max-width: 650px;
            margin: 0 auto 2rem;
            color: rgba(245, 234, 221, 0.85);
            line-height: 1.7;
        }
        .discord-button {
            background: #5865F2; /* Discord Blurple */
            border-color: #4650c1;
            animation: pulse 2s infinite;
        }
        .discord-button:hover {
            background: #4650c1;
            animation: none;
        }
        @keyframes pulse {
            0% { box-shadow: 0 5px 20px rgba(88, 101, 242, 0.4), inset 0 1px 2px rgba(255,255,255,0.2); }
            50% { box-shadow: 0 5px 30px rgba(88, 101, 242, 0.7), inset 0 1px 2px rgba(255,255,255,0.2); }
            100% { box-shadow: 0 5px 20px rgba(88, 101, 242, 0.4), inset 0 1px 2px rgba(255,255,255,0.2); }
        }
        .countdown-wrapper {
            margin-top: 4rem;
            padding-top: 3rem;
            border-top: 1px solid rgba(224, 194, 128, 0.15);
        }
        .countdown-title {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: rgba(245, 234, 221, 0.7);
            margin-bottom: 2rem;
        }
		.form-group { margin-bottom: 1.5rem; position: relative; }
		.form-input {
            width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--color-accent-dark); border-radius: 8px;
            background: rgba(168, 212, 230, 0.05); color: var(--color-text-light); font-size: 1rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .form-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 15px rgba(168, 212, 230, 0.5); }
        .form-input::placeholder { color: rgba(232, 244, 248, 0.5); }
		.login-container {
            background: rgba(10, 21, 32, 0.6); border: 2px solid var(--color-accent); border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(168, 212, 230, 0.3);
            padding: 2.5rem; max-width: 450px; width: 90%; backdrop-filter: blur(10px);
		}
		.login-title {
            font-family: var(--font-display); font-size: 2.5rem; color: var(--color-accent);
            text-align: center; margin-bottom: 2rem;
            text-shadow: 0 0 15px var(--color-accent), 0 0 30px var(--color-primary);
        }

        /* --- Countdown Section --- */
        .countdown-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
        @media (min-width: 768px) { .countdown-container { grid-template-columns: repeat(4, 1fr); } }
        .countdown-item { text-align: center; }
        .countdown-value {
            font-family: var(--font-display); font-size: 3rem; color: var(--color-accent);
            text-shadow: 0 0 10px var(--color-accent); line-height: 1;
        }
        @media (min-width: 768px) { .countdown-value { font-size: 5rem; } }
        .countdown-label {
            font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px;
            color: var(--color-text-light); opacity: 0.8;
        }
        @media (min-width: 768px) { .countdown-label { font-size: 1rem; } }

        /* --- Other sections --- */
        .description-text { max-width: 800px; margin: 0 auto; text-align: center; line-height: 1.8; font-size: 1rem; color: rgba(245, 234, 221, 0.85); }
        @media (min-width: 768px) { .description-text { font-size: 1.1rem; } }
        .screenshot-gallery { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; }
        @media (min-width: 640px) { .screenshot-gallery { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
        .screenshot-item { position: relative; overflow: hidden; border-radius: 8px; background: rgba(0,0,0,0.4); padding: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.6); }
        .screenshot-item img { width: 100%; height: auto; border-radius: 6px; border: 2px solid rgba(224, 194, 128, 0.3); transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
        .screenshot-item:hover img { transform: scale(1.1); border-color: var(--color-accent); box-shadow: 0 0 15px var(--color-accent), 0 0 5px var(--color-accent) inset; }
        .footer { padding: 3rem 1rem; background: var(--color-bg-dark); border-top: 1px solid rgba(224, 194, 128, 0.2); text-align: center; font-size: 0.9rem; color: rgba(245, 234, 221, 0.6); }
        .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
        .footer-links a { color: rgba(245, 234, 221, 0.8); text-decoration: none; margin: 0 0.5rem; transition: color 0.3s; }
        .footer-links a:hover { color: var(--color-accent); }
		
		[x-cloak] { display: none !important; }
		*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.top-full{top:100%}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:0.5rem}.mt-8{margin-top:2rem}.inline-block{display:inline-block}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.h-6{height:1.5rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-full{width:100%}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.border-l{border-left-width:1px}.border-gray-700\/50{border-color:rgb(55 65 81 / 0.5)}.bg-black\/80{background-color:rgb(0 0 0 / 0.8)}.p-2{padding:0.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-4{padding-left:1rem}.text-center{text-align:center}.\!text-4xl{font-size:2.25rem !important;line-height:2.5rem !important}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-60{opacity:0.6}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:opacity-100:hover{opacity:1}@media (min-width: 768px){.md\:flex{display:flex}.md\:hidden{display:none}}