@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap";:root{--primary-color:#005aa4;--primary-hover:#004683;--bg-main:#fff;--bg-secondary:#f1f5f9;--text-main:#0f172a;--text-muted:#64748b;--glass-bg:#ffffffe6;--glass-border:#0000001a;--sold-tile-bg:#000000a6;--sold-text-color:#fff;--available-tile-hover:#005aa41a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-main);flex-direction:column;min-height:100vh;font-family:Inter,sans-serif;display:flex}#root{flex-direction:column;min-height:100vh;display:flex}.app-header{background-color:var(--bg-main);border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;height:60px;padding:0 2rem;display:flex}.logo-container{align-items:center;height:100%;display:flex}.logo-container span.title{padding-left:30px;font-size:1.5rem;font-weight:600}.logo{width:auto;max-height:50px}.header-nav{align-items:center;height:100%;display:flex}.website-link{color:var(--text-main);border-top:5px solid var(--primary-color);box-sizing:border-box;align-items:center;height:100%;padding:0 1rem;font-size:1rem;font-weight:400;text-decoration:none;transition:opacity .2s;display:flex}.website-link:hover{opacity:.8}.main-container{flex-grow:1;justify-content:center;align-items:center;padding:1rem;display:flex}.flag-container-wrapper{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:16px;width:90vw;max-width:900px;max-height:85vh;padding:1rem;display:block;overflow:auto;box-shadow:0 25px 50px -12px #00000080}.flag-container{aspect-ratio:1;background-position:50%;background-size:cover;border-radius:8px;width:100%;min-width:700px;max-width:900px;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a}.css-grid-overlay{width:100%;height:100%;display:grid;position:absolute;top:0;left:0}.tile{cursor:pointer;border:1px solid #ffffff26;justify-content:center;align-items:center;min-width:0;min-height:0;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.tile.available{background-color:#0000}.tile.available:hover{background-color:var(--available-tile-hover);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10;border-color:#ffffff80;border-radius:4px;transform:scale(1.05);box-shadow:0 10px 15px -3px #0000004d}.tile.sold{background-color:var(--sold-tile-bg);-webkit-backdrop-filter:grayscale()blur(4px);backdrop-filter:grayscale()blur(4px);cursor:not-allowed;border-color:#00000080}.tile-owner-name{color:var(--sold-text-color);text-align:center;text-shadow:0 2px 4px #000c;word-break:break-word;opacity:0;padding:.2rem;font-size:clamp(.2rem,.3vw,.5rem);font-weight:600;animation:.5s ease-out forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background-color:#000000b3;justify-content:center;align-items:center;animation:.2s ease-out fadeInOverlay;display:flex;position:fixed;inset:0}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:16px;width:90%;max-width:450px;padding:2.5rem;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards bounceIn;transform:scale(.95);box-shadow:0 4px 6px -1px #00000080,0 2px 4px -1px #0000004d}@keyframes bounceIn{to{transform:scale(1)}}.modal-content h2{color:var(--text-main);margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.modal-content p{color:var(--text-muted);margin-bottom:2rem;font-size:.95rem;line-height:1.5}.input-group{margin-bottom:1.5rem}.input-group label{color:var(--text-main);margin-bottom:.5rem;font-size:.9rem;font-weight:600;display:block}.input-group input{border:1px solid var(--glass-border);width:100%;color:var(--text-main);background:#fffc;border-radius:8px;padding:.8rem 1rem;font-size:1rem;transition:border-color .2s,box-shadow .2s}.input-group input:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #2563eb4d}.modal-actions{justify-content:flex-end;gap:1rem;margin-top:2rem;display:flex}button{cursor:pointer;border:none;border-radius:8px;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s}button.cancel-btn{color:var(--text-muted);background:0 0}button.cancel-btn:hover{color:var(--text-main);background:#0000000d}button.confirm-btn{background:var(--primary-color);color:#fff;box-shadow:0 4px 6px -1px #2563eb66}button.confirm-btn:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 8px -1px #2563eb80}button:disabled{opacity:.6;cursor:not-allowed}.loader-container{justify-content:center;align-items:center;width:100%;height:100%;padding:4rem;display:flex}.spinner{border:4px solid #ffffff1a;border-top-color:var(--primary-color);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{color:#fca5a5;text-align:center;background-color:#ef44441a;border:1px solid #ef444433;border-radius:8px;max-width:600px;margin:1rem auto;padding:1rem}