*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}
::-webkit-progress-bar,
::-webkit-progress-value,
::-moz-progress-bar{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
}
progress{
    display:none !important;
    visibility:hidden !important;
}
#spaLoader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(30, 25, 20, 0.95);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    transition:opacity 0.3s ease;
}
#spaLoader.fade-out{
    opacity:0;
}
.spa-loader-spinner{
    width:50px;
    height:50px;
    border:4px solid rgba(194, 122, 58, 0.3);
    border-top-color:#c27a3a;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}
#pageContent{
    min-height:100vh;
    height:100%;
}
body{
    font-family:"Cinzel", serif;
    background:linear-gradient(135deg, #1e1914, #2d2218);
    color:#f0ebe4;
    overflow:hidden;
    height:100vh;
    width:100vw;
    position:relative;
}
.background-image{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0.3;
    pointer-events:none;
}
/* === BUTTONS === */
.btn-primary{
    padding:15px 40px;
    font-size:1.1rem;
    font-weight:600;
    background:linear-gradient(135deg, #8b5a2b, #c27a3a);
    color:#fff;
    border:none;
    border-radius:12px;
    cursor:pointer;
    transition:all 0.3s ease;
    box-shadow:0 4px 15px rgba(0, 0, 0, 0.3);
    letter-spacing:1px;
    font-family:"Cinzel", serif;
    text-decoration:none;
}
.btn-primary:hover, .btn-primary:active{
    background:linear-gradient(135deg, #c27a3a, #e8a84c);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(194, 122, 58, 0.4);
}
.btn-secondary{
    padding: 12px 30px;
    font-size: 1rem;
    font-family: "Cinzel", serif;
    color: #ffe3ca;
    border: 2px solid #a27955;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-block;
    background: #7d6035cc;
}
.btn-secondary:hover, .btn-secondary:active{
    background: #a77f44cc;
    color: #ffe3ca;
    border: 2px solid #a27955;
}
.mt24{margin-top:24px;}
/* === LANGUAGE === */
.language-buttons{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-top:30px;
}
.btn-language{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:20px 40px;
    font-size:1.2rem;
    font-family:"Cinzel", serif;
    background:rgba(139, 90, 43, 0.15);
    color:#f0ebe4;
    border:2px solid rgba(139, 90, 43, 0.4);
    border-radius:12px;
    cursor:pointer;
    transition:all 0.3s ease;
}
.btn-language:hover, .btn-language:active{
    background:linear-gradient(135deg, #8b5a2b, #c27a3a);
    color:#fff;
    border-color:#c27a3a;
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(194, 122, 58, 0.3);
}
.btn-language .flag-icon{
    width:50px;
    height:auto;
    border-radius:4px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.btn-language .lang-name{
    font-weight:600;
    letter-spacing:1px;
}
/* === SCREENS === */
.screen{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    z-index:10;
}
.screen.active{
    display:block;
}
/* === LOADER === */
.loader{
    width:60px;
    height:60px;
    border:5px solid rgba(194, 122, 58, 0.3);
    border-top:5px solid #c27a3a;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:14px;
}
#loadingScreen.active{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:radial-gradient(circle at center, #2d2218, #1e1914);
}
@keyframes spin{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
/* === WELCOME === */
.welcome-container{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
#languageScreen.active{
    display:flex;
    align-items:center;
    justify-content:center;
}
.welcome-overlay{
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height:100%;
    padding:2rem;
}
.welcome-main{
    flex-grow:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.welcome-overline{
    font-size:0.9rem;
    color:#f5cda9;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:0.5rem;
}
.main-title{
    font-family:"Cinzel", serif;
    font-size:2.8rem;
    font-weight:700;
    color:#e8a84c;
    text-shadow:2px 2px 8px rgba(0, 0, 0, 0.6);
    margin-bottom:2rem;
    line-height:1.2;
}
@keyframes titleGlow{
    0%, 100%{text-shadow:2px 2px 8px rgba(0,0,0,0.6);}
    50%{text-shadow:2px 2px 16px rgba(194, 122, 58, 0.4);}
}
/* === CONTENT BOX === */
.content-box{
    background:linear-gradient(135deg, rgba(30, 25, 20, 0.95), rgba(45, 34, 24, 0.95));
    border:2px solid rgba(194, 122, 58, 0.5);
    border-radius:16px;
    padding:2rem;
    margin:1rem;
    box-shadow:0 10px 30px rgba(0, 0, 0, 0.5);
    max-width:600px;
    width:calc(100% - 2rem);
    text-align:center;
}
.content-box h2{
    font-family:"Cinzel", serif;
    font-size:1.8rem;
    color:#e8a84c;
    margin-bottom:1rem;
    text-align:center;
}
.content-box p{
    font-size:1rem;
    line-height:1.6;
    margin-bottom:1.5rem;
    text-align:center;
}
/* === INTRO === */
.intro-container{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
}
.intro-text{
    font-size:1.05rem;
    line-height:1.7;
    color:#d5cfc6;
}
/* === PERMISSIONS === */
.permissions-box{
    text-align:left;
    margin:1rem 0;
}
.permissions-box p{
    text-align:left;
}
.permission-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid rgba(139, 90, 43, 0.2);
}
.permission-desc strong{
    color:#c27a3a;
    display:block;
    margin-bottom:4px;
}
.permission-desc p{
    font-size:0.9rem;
    color:#bbb;
    margin:0;
}
.permission-note{
    font-size:0.85rem;
    color:#888;
    margin-top:12px;
    font-style:italic;
}
/* === ARTIFACTS LIST === */
.artifacts-container{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
}
.artifacts-content{
    max-width:600px;
    width:100%;
    text-align:center;
    padding:1.5rem 0;
}
.artifacts-content h2{
    font-family:"Cinzel", serif;
    font-size:1.8rem;
    color:#ffb03f;
    margin-bottom:0.5rem;
}
.artifacts-subtitle{
    color:#fff;
    font-size:0.9rem;
    margin-bottom:1.5rem;
}
.relics-list-container{
    margin:0 0 1rem;
}
.relics-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.relic-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px;
    background:rgba(45, 34, 24, 0.8);
    border:1px solid rgba(139, 90, 43, 0.3);
    border-radius:12px;
    cursor:pointer;
    transition:all 0.3s ease;
}
.relic-item:active{
    background:rgba(194, 122, 58, 0.15);
    border-color:#c27a3a;
}
.relic-item.collected{
    border-color:rgba(76, 175, 80, 0.4);
    background:rgba(76, 175, 80, 0.08);
}
.relic-item-number{
    width:36px;
    height:36px;
    border-radius:50%;
    background:linear-gradient(135deg, #8b5a2b, #c27a3a);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:0.9rem;
    flex-shrink:0;
}
.relic-item.collected .relic-item-number{
    background:linear-gradient(135deg, #388E3C, #4CAF50);
}
.relic-item-info{
    flex-grow:1;
    text-align:left;
}
.relic-item-name{
    display:block;
    font-size:1rem;
    font-weight:600;
    color:#f0ebe4;
    margin-bottom:2px;
}
.relic-item-status{
    display:block;
    font-size:0.8rem;
    color:#efab6e;
}
.relic-item.collected .relic-item-status{
    color:#4CAF50;
}
.relic-item-arrow{
    color:#666;
    font-size:1.5rem;
    flex-shrink:0;
}
/* === SETTINGS === */
.settings-btn{
    position:fixed;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(45, 34, 24, 0.7);
    border:1px solid rgba(139, 90, 43, 0.4);
    color:#c79d78;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:100;
    transition:all 0.3s ease;
}
.settings-btn svg{
    width:22px;
    height:22px;
}
.settings-btn:active{
    background:rgba(194, 122, 58, 0.3);
}
.settings-modal-content{
    max-width:400px;
}
.settings-options{
    margin:1rem 0;
}
.settings-option{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid rgba(139, 90, 43, 0.2);
}
.settings-option-label{
    font-size:0.95rem;
    color:#d5cfc6;
    display: block;
    padding: 10px;
}
.settings-language-buttons{
    display:flex;
    gap:8px;
}
.btn-lang-small{
    width:40px;
    height:30px;
    border-radius:6px;
    border:2px solid rgba(139, 90, 43, 0.3);
    background:transparent;
    cursor:pointer;
    padding:2px;
    transition:all 0.3s ease;
}
.btn-lang-small img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:3px;
}
.btn-lang-small.active{
    border-color:#c27a3a;
    box-shadow:0 0 8px rgba(194, 122, 58, 0.3);
}
/* === MODAL === */
.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.8);
    z-index:1000;
    justify-content:center;
    align-items:center;
}
.modal.active{
    display:flex;
}
.modal-content{
    background:linear-gradient(135deg, #2d2218, #1e1914);
    border:2px solid rgba(194, 122, 58, 0.5);
    border-radius:16px;
    padding:2rem;
    max-width:90%;
    max-height:80%;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    text-align:center;
}
.modal-content::-webkit-scrollbar{
    display:none;
}
.modal-content h3{
    font-family:"Cinzel", serif;
    font-size:1.5rem;
    color:#e8a84c;
    margin-bottom:1rem;
}
.modal-content p{
    font-size:1rem;
    line-height:1.6;
    margin-bottom:1rem;
    color:#d5cfc6;
}
/* === COMPLETION === */
.completion-container{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem;
    background:radial-gradient(circle at center, rgba(45, 34, 24, 0.9), rgba(30, 25, 20, 0.95));
}
.completion-content{
    text-align:center;
    max-width:600px;
}
.completion-content h2{
    font-family:"Cinzel", serif;
    font-size:2.2rem;
    color:#e8a84c;
    margin-bottom:1.5rem;
    text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);
}
.completion-content p{
    font-size:1.1rem;
    line-height:1.6;
    margin-bottom:1.5rem;
}
p.cursive{
    font-style:italic;
    color:#d5cfc6;
}
.certificate-form{
    margin:1.5rem 0;
    padding:1.5rem;
    background:rgba(30, 25, 20, 0.8);
    border:1px solid rgba(139, 90, 43, 0.4);
    border-radius:12px;
}
.certificate-intro{
    font-size:0.95rem !important;
    color:#d5cfc6 !important;
    margin-bottom:1rem !important;
}
.certificate-input{
    width:100%;
    max-width:300px;
    padding:12px 16px;
    font-size:1rem;
    font-family:"Cinzel", serif;
    background:rgba(255, 255, 255, 0.08);
    border:2px solid rgba(139, 90, 43, 0.4);
    border-radius:8px;
    color:#f0ebe4;
    text-align:center;
    margin-bottom:1rem;
    transition:all 0.3s ease;
}
.certificate-input:focus{
    outline:none;
    border-color:#c27a3a;
    background:rgba(255, 255, 255, 0.12);
    box-shadow:0 0 10px rgba(194, 122, 58, 0.3);
}
.certificate-input::placeholder{
    color:#888;
}
/* === COLLECTED === */
.collected-content{
    text-align:center;
    max-width:600px;
    width:100%;
    padding:2rem 0;
}
.collected-header{
    margin-bottom:2rem;
}
.collected-header h2{
    font-family:"Cinzel", serif;
    font-size:2rem;
    color:#e8a84c;
    margin-bottom:0.5rem;
}
.collected-icon{
    font-size:3rem;
    margin-bottom:1rem;
}
.collected-counter{
    font-size:1.1rem;
    color:#c27a3a;
    font-weight:600;
}
.artifact-info-box{
    background:rgba(45, 34, 24, 0.6);
    border:1px solid rgba(139, 90, 43, 0.3);
    border-radius:12px;
    padding:1.5rem;
    margin-bottom:2rem;
    text-align:left;
}
.artifact-info-box h3{
    font-family:"Cinzel", serif;
    font-size:1.2rem;
    color:#e8a84c;
    margin-bottom:0.8rem;
}
.artifact-info-text{
    font-size:0.95rem;
    line-height:1.7;
    color:#d5cfc6;
}
.collected-actions{
    margin-top:1.5rem;
}
/* === RESET BUTTON === */
.btn-reset{
    margin-top: 1.5rem;
    padding: 10px 20px;
    font-size: 0.85rem;
    font-family: "Cinzel", serif;
    background: #1e1208e0;
    color: #c1b192;
    border: 1px solid rgb(151 129 96 / 66%);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity:0.8;
}
.btn-reset:active{
    background:#1e1208;
    opacity:1;
}
/* === SCORE DISPLAY === */
.score-display{
    font-size:0.9rem;
    color:#c27a3a;
    padding:4px 0;
}
/* === ONLY MOBILE === */
.pcdevice{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
    padding:2rem;
    text-align:center;
    font-size:1.2rem;
    color:#c27a3a;
    background:linear-gradient(135deg, #1e1914, #2d2218);
}
.artifacts-container {
    align-items: flex-start;
}
.artifacts-content {
    margin: auto 0;
    padding: 20px 0;
}
.relic-detail-box {
    background: rgb(0 0 0 / 65%);
    border: 1px solid rgba(139,100,60,0.5);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}
.relic-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #ddd;
    margin-bottom: 15px;
}
.relic-status-check {
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
}
.relic-status-check.collected {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid #4CAF50;
    color: #4CAF50;
}
.relic-status-check.not-collected {
    background: rgba(194, 122, 58, 0.1);
    color: #c27a3a;
}
.relic-map-container {
    margin: 20px 0;
}
#relicMap {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    border: 2px solid rgba(139,100,60,0.5);
    margin-bottom: 10px;
}
.btn-directions {
    display: block;
    text-align: center;
    padding: 12px;
    background: rgba(66, 133, 244, 0.2);
    border: 1px solid #4285f4;
    border-radius: 8px;
    color: #4285f4;
    text-decoration: none;
    font-size: 0.95rem;
}
.relic-actions {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 20px;
}
.relic-actions .btn-primary,
.relic-actions .btn-secondary {
    position: relative;
    z-index: 10;
}
.btn-large {
    padding: 18px 30px;
    font-size: 1.1rem;
}
/* === PWA INSTALL BANNER === */
#installBanner{
    position:fixed;
    bottom:-80px;
    left:0;
    right:0;
    background:linear-gradient(135deg, #2d2218, #3a2c1e);
    border-top:1px solid rgba(194, 122, 58, 0.4);
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    z-index:99998;
    transition:bottom 0.4s ease;
    box-shadow:0 -4px 20px rgba(0,0,0,0.4);
}
#installBanner.visible{
    bottom:0;
}
.install-banner-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
    min-width:0;
}
.install-banner-text strong{
    font-family:"Cinzel", serif;
    font-size:0.85rem;
    color:#e8a84c;
}
.install-banner-text span{
    font-size:0.75rem;
    color:#aaa;
}
.install-banner-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}
.install-banner-btn{
    padding:8px 18px;
    font-size:0.85rem;
    font-family:"Cinzel", serif;
    font-weight:600;
    background:linear-gradient(135deg, #8b5a2b, #c27a3a);
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
}
.install-banner-btn:active{
    transform:scale(0.95);
}
.install-banner-close{
    width:32px;
    height:32px;
    background:none;
    border:none;
    color:#888;
    font-size:1.3rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}