@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');*{margin:0;padding:0;box-sizing:border-box;}body{font-family:var(--font-primary);background:linear-gradient(135deg,var(--color-purple-start) 0%,var(--color-purple-end) 100%);min-height:100vh;padding:var(--spacing-lg);}.container{max-width:var(--max-width-lg);margin:0 auto;}.text-center{text-align:center;}.flex-center{display:flex;align-items:center;justify-content:center;}.header{text-align:center;margin-bottom:var(--spacing-2xl);}.header-title{font-size:var(--font-5xl);font-weight:var(--font-bold);color:white;margin-bottom:var(--spacing-lg);}.header-subtitle{font-size:var(--font-xl);color:white;opacity:0.9;}.progress-container{background:rgba(255,255,255,0.2);border-radius:var(--radius-full);padding:var(--spacing-sm);margin-bottom:var(--spacing-2xl);}.progress-bar{display:flex;justify-content:space-between;align-items:center;}.progress-step{width:var(--size-icon-md);height:var(--size-icon-md);border-radius:50%;background:rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;color:white;font-weight:var(--font-bold);font-size:var(--font-2xl);transition:all var(--transition-normal);}.progress-step.active,.progress-line.active{background:linear-gradient(135deg,var(--color-primary),var(--color-indigo));box-shadow:0 0 0 4px rgba(59,130,246,0.3);transform:scale(1.1);}.progress-step.completed{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 0 10px rgba(245,158,11,0.5);}.progress-line{flex:1;height:var(--spacing-sm);background:rgba(255,255,255,0.3);border-radius:var(--radius-xs);margin:0 var(--spacing-sm);transition:all var(--transition-normal);}.progress-line.completed{background:linear-gradient(90deg,#f59e0b,#d97706);box-shadow:0 2px 8px rgba(245,158,11,0.4);}.game-card{background:white;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;margin-bottom:var(--spacing-2xl);display:none;}.game-card.active{display:block;}.screen{padding:var(--spacing-2xl);}.welcome-screen{display:flex;flex-direction:column;}.icon-large{font-size:var(--size-icon-lg);margin-bottom:var(--spacing-xl);text-align:center;}.screen-title{font-size:var(--font-3xl);font-weight:var(--font-bold);color:var(--color-secondary-darker);margin-bottom:var(--spacing-lg);text-align:center;}.screen-text{font-size:var(--font-lg);color:var(--color-secondary);margin-bottom:var(--spacing-xl);text-align:center;}.box{border-radius:var(--radius-sm);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);border:var(--border-width) solid;}.info-box{background:linear-gradient(to right,var(--color-primary-bg),var(--color-purple-light));border-color:var(--color-primary-light);border-radius:var(--radius-sm);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);}.info-title{font-weight:var(--font-bold);color:var(--color-primary-dark);margin-bottom:var(--spacing-md);text-align:center;font-size:var(--font-xl);}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg);}.info-item{background:white;padding:var(--spacing-md);border-radius:var(--radius-sm);border:var(--border-width-sm) solid var(--color-primary-light);}.info-number{font-size:var(--font-2xl);margin-bottom:var(--spacing-sm);text-align:center;}.info-label{font-weight:var(--font-bold);color:var(--color-primary-dark);margin-bottom:var(--spacing-xs);text-align:center;}.info-desc{color:var(--color-primary);font-size:var(--font-sm);text-align:center;}.locations-box{background:var(--color-warning-lightest);border:var(--border-width) solid var(--color-warning-light);border-radius:var(--radius-sm);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);}.locations-title{font-weight:var(--font-bold);color:var(--color-brown);margin-bottom:var(--spacing-sm);text-align:center;}.locations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-sm);font-size:var(--font-sm);color:var(--color-brown-light);text-align:center;}.location-badge{background:var(--color-primary-lightest);border:var(--border-width-sm) solid var(--color-primary-light);border-radius:var(--radius-sm);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);text-align:center;font-size:var(--font-sm);color:var(--color-primary-dark);}.btn{font-family:var(--font-primary);font-weight:var(--font-bold);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-sm);border:none;cursor:pointer;transition:all var(--transition-normal);font-size:var(--font-base);}.btn:hover{transform:scale(1.05);}.btn-primary,.btn-warning{flex:1;}.btn-primary{background:linear-gradient(to right,var(--color-primary),var(--color-indigo));color:white;}.btn-primary:hover{background:linear-gradient(to right,var(--color-primary-darker),var(--color-indigo-dark));}.btn-secondary{background:var(--color-secondary);color:white;}.btn-secondary:hover{background:var(--color-secondary-dark);}.btn-warning{background:linear-gradient(to right,var(--color-warning-dark),#ea580c);color:white;}.btn-warning:hover{background:linear-gradient(to right,var(--color-warning-darker),#c2410c);}.btn-large{padding:var(--spacing-lg) var(--spacing-2xl);font-size:var(--font-xl);}.btn-small{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-sm);}.button-group{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl);}.success-message{background:linear-gradient(to right,var(--color-success-lightest),var(--color-success-bg));border:var(--border-width) solid var(--color-success-lighter);border-radius:var(--radius-sm);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);text-align:center;}.success-icon{font-size:var(--font-5xl);margin-bottom:var(--spacing-md);}.success-title{font-size:var(--font-xl);font-weight:var(--font-bold);color:var(--color-success-dark);margin-bottom:var(--spacing-md);}.success-text{color:var(--color-success-darker);font-weight:var(--font-semibold);}.next-location-box{background:linear-gradient(to right,var(--color-primary-lightest),var(--color-indigo-light));border:var(--border-width) solid var(--color-primary-light);border-radius:var(--radius-sm);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);}.next-location-title{font-size:var(--font-xl);font-weight:var(--font-bold);color:var(--color-primary-dark);margin-bottom:var(--spacing-md);text-align:center;}.next-location-name{font-size:var(--font-lg);color:var(--color-primary-dark);font-weight:var(--font-semibold);margin-bottom:var(--spacing-lg);text-align:center;}.search-instruction{background:var(--color-warning-lightest);border:var(--border-width-sm) solid var(--color-warning-light);border-radius:var(--radius-xs);padding:var(--spacing-md);font-size:var(--font-sm);color:var(--color-brown);}.code-input-box{background:white;border:var(--border-width) solid var(--color-warning-lighter);border-radius:var(--radius-sm);padding:var(--spacing-xl);margin:0 auto var(--spacing-xl);max-width:var(--max-width-xs);display:flex;flex-direction:column;align-items:center;}.code-input-title{font-weight:var(--font-bold);color:var(--color-brown);margin-bottom:var(--spacing-lg);text-align:center;}.code-inputs{display:flex;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);direction:ltr;}.exchange-input{width:var(--size-input);height:var(--size-input);text-align:center;font-size:var(--font-xl);font-weight:var(--font-bold);border:var(--border-width) solid var(--color-gray-300);border-radius:var(--radius-sm);background:white;font-family:var(--font-primary);}.exchange-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px rgba(59,130,246,0.1);}.input-hint{font-size:var(--font-xs);color:var(--color-brown-light);margin-top:var(--spacing-sm);text-align:center;}.final-success-box{background:linear-gradient(to right,var(--color-success-lightest),var(--color-success-bg));border:var(--border-width) solid var(--color-success-lighter);border-radius:var(--radius-sm);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);text-align:center;}.final-icon{font-size:var(--font-5xl);margin-bottom:var(--spacing-md);}.final-title{font-size:var(--font-2xl);font-weight:var(--font-bold);color:var(--color-success-dark);margin-bottom:var(--spacing-md);}.final-text{font-size:var(--font-lg);color:var(--color-success-darker);font-weight:var(--font-semibold);}.treasure-key-box{background:linear-gradient(to right,var(--color-warning-lighter),#f97316);padding:var(--spacing-xl);border-radius:var(--radius-sm);margin-bottom:var(--spacing-xl);}.treasure-key-title{font-size:var(--font-2xl);font-weight:var(--font-bold);color:white;margin-bottom:var(--spacing-lg);text-align:center;}.treasure-key-code{font-size:var(--font-5xl);font-family:monospace;color:white;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-sm);text-align:center;margin-bottom:var(--spacing-sm);}.treasure-key-text{color:var(--color-warning-lightest);margin-top:var(--spacing-sm);text-align:center;}.warning-box{background:var(--color-error-lightest);border:var(--border-width) solid var(--color-error-light);border-radius:var(--radius-sm);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);}.warning-title{font-weight:var(--font-bold);color:var(--color-error-dark);margin-bottom:var(--spacing-sm);text-align:center;}.warning-text{color:var(--color-error-darker);font-weight:var(--font-semibold);text-align:center;}.warning-subtext{color:var(--color-error);font-size:var(--font-sm);margin-top:var(--spacing-xs);text-align:center;}.completion-box{background:var(--color-primary-lightest);border:var(--border-width) solid var(--color-primary-light);border-radius:var(--radius-sm);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);}.completion-title{font-weight:var(--font-bold);color:var(--color-primary-dark);margin-bottom:var(--spacing-sm);text-align:center;}.completion-text{color:var(--color-primary-dark);text-align:center;}.bottom-nav{display:flex;justify-content:center;gap:var(--spacing-lg);flex-wrap:wrap;margin-top:var(--spacing-xl);}.bottom-nav .btn{background:rgba(255,255,255,0.2);color:white;}.bottom-nav .btn:hover{background:rgba(255,255,255,0.3);}.flex{display:flex;flex-direction:row;}@media (max-width:768px){.header-title{font-size:var(--font-4xl);}.header-subtitle{font-size:var(--font-base);}.screen-title{font-size:var(--font-2xl);}.info-grid{grid-template-columns:1fr;}.locations-grid{grid-template-columns:repeat(2,1fr);}.button-group{flex-direction:column;}.progress-step{width:var(--size-icon-sm);height:var(--size-icon-sm);font-size:var(--font-base);}}.thumbnail{width:100%;}.final-screen{display:flex;flex-direction:column;}