/* WikiHarita — Wikimedia Codex Design */
:root {
    --color-base: #202122; --color-subtle: #54595d; --color-placeholder: #72777d;
    --color-inverted: #fff; --color-progressive: #3366cc; --color-progressive-hover: #2a4b8d;
    --color-success: #14866d; --color-success-subtle: #d5fdf4;
    --color-destructive: #d73333; --color-warning: #edab00;
    --bg-base: #f8f9fa; --bg-surface: #fff; --bg-surface-hover: #eaecf0;
    --border-subtle: #c8ccd1;
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --shadow-md: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-family);color:var(--color-base);background:var(--bg-base);min-height:100vh;line-height:1.6}
.bg-pattern{position:fixed;inset:0;background:radial-gradient(circle at 20% 80%,rgba(51,102,204,0.06) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(20,134,109,0.06) 0%,transparent 50%);z-index:0;pointer-events:none}
.container{max-width:700px;margin:0 auto;padding:16px;position:relative;z-index:1}
.header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:16px;border:1px solid var(--border-subtle)}
.header-logo{display:flex;align-items:center;gap:8px;font-size:1.1rem;font-weight:700;color:var(--color-progressive)}
.header-logo .logo-icon{font-size:1.3rem}
.header-stats{display:flex;align-items:center;gap:16px}
.stat-item{display:flex;align-items:center;gap:4px;font-size:.875rem;font-weight:700}
.score-val{color:var(--color-progressive)}
.screen{display:none;animation:fadeIn .3s ease}.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.start-screen{text-align:center;padding:40px 16px}
.game-title{font-size:2.25rem;font-weight:700;color:var(--color-progressive);margin-bottom:8px;letter-spacing:-.02em}
.game-title .title-icon{display:block;font-size:3.5rem;margin-bottom:12px}
.game-subtitle{font-size:1.1rem;color:var(--color-subtle);margin-bottom:32px}
.rules-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;margin-bottom:32px;text-align:left;box-shadow:var(--shadow-sm)}
.rules-card h3{font-size:1rem;color:var(--color-progressive);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.rules-card ul{list-style:none}.rules-card li{padding:6px 0;font-size:.875rem;color:var(--color-subtle);display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.rules-card li .rule-icon{flex-shrink:0;font-size:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 32px;font-family:var(--font-family);font-size:1rem;font-weight:700;border:none;border-radius:var(--radius-pill);cursor:pointer;transition:all .2s ease;user-select:none;text-decoration:none}
.btn-primary{background:var(--color-progressive);color:var(--color-inverted);box-shadow:var(--shadow-md);min-width:180px;padding:14px 40px;font-size:1.1rem}
.btn-primary:hover{background:var(--color-progressive-hover);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.btn-secondary{background:var(--bg-surface);color:var(--color-progressive);border:1px solid var(--color-progressive);padding:12px 24px}
.btn-secondary:hover{background:rgba(51,102,204,0.05)}
.btn-confirm{min-width:140px;padding:10px 24px;font-size:.95rem}
/* Place Card */
.place-card{background:var(--bg-surface);border-radius:var(--radius-lg);padding:20px;text-align:center;margin-bottom:12px;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.place-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--color-progressive),var(--color-success))}
.place-emoji{font-size:2rem;margin-bottom:4px}
.place-name{font-size:1.5rem;font-weight:700;color:var(--color-base);margin-bottom:4px}
.place-desc{font-size:.8125rem;color:var(--color-subtle)}
/* Map */
.map-container{border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--border-subtle);box-shadow:var(--shadow-md);margin-bottom:12px}
#map{height:400px;width:100%;cursor:crosshair}
.action-row{text-align:center;margin-bottom:12px}
.map-hint{font-size:.875rem;color:var(--color-subtle);font-weight:700}
/* Result */
.result-card{background:var(--bg-surface);border-radius:var(--radius-lg);padding:20px;text-align:center;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);margin-bottom:12px;animation:fadeIn .3s ease}
.result-distance{font-size:1.5rem;font-weight:700;margin-bottom:4px}
.result-points{font-size:1.1rem;color:var(--color-progressive);font-weight:700;margin-bottom:12px}
.result-distance.close{color:var(--color-success)}.result-distance.medium{color:var(--color-warning)}.result-distance.far{color:var(--color-destructive)}
/* Loading */
.loading-overlay{display:none;position:fixed;inset:0;background:rgba(248,249,250,0.85);z-index:100;align-items:center;justify-content:center;flex-direction:column;gap:16px;backdrop-filter:blur(4px)}
.loading-overlay.active{display:flex}
.spinner{width:40px;height:40px;border:3px solid var(--border-subtle);border-top-color:var(--color-progressive);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:.875rem;color:var(--color-subtle);font-weight:700}
.points-toast{position:fixed;top:30%;left:50%;transform:translateX(-50%);font-size:1.75rem;font-weight:700;color:var(--color-success);pointer-events:none;z-index:200;opacity:0}
.points-toast.show{animation:ptFloat 1s ease forwards}
@keyframes ptFloat{0%{opacity:0;transform:translateX(-50%) translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-60px)}}
.gameover-screen{text-align:center;padding:32px 16px}
.gameover-subtitle{font-size:1rem;color:var(--color-subtle);margin-bottom:32px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}
.stat-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}
.stat-card-value{font-size:1.5rem;font-weight:700;color:var(--color-progressive)}
.stat-card-label{font-size:.8125rem;color:var(--color-subtle);margin-top:4px}
.gameover-buttons{display:flex;flex-direction:column;gap:12px;align-items:center}
.footer{text-align:center;padding:24px 0;font-size:.8125rem;color:var(--color-placeholder)}
.footer a{color:var(--color-progressive);text-decoration:none}.footer a:hover{text-decoration:underline}
/* Line on map */
.distance-line{stroke:var(--color-destructive);stroke-width:2;stroke-dasharray:8,4}
@media(max-width:480px){.container{padding:12px}#map{height:300px}.game-title{font-size:1.75rem}.place-name{font-size:1.25rem}.stats-grid{gap:8px}}