:root{
  --bg:#EDEEE7; --bg-elevated:#F8F8F3; --bg-sunken:#E3E4DA;
  --ink:#201E22; --ink-soft:#5B564C; --ink-faint:#8B8577;
  --line:#DBD5C5; --line-strong:#C7C0AC;
  --accent:#B23A2E; --accent-ink:#8C2C22;
  --gold:#B8842B; --silver:#8A8578; --bronze:#9C5A34;
  --cat-poble:#A9793C; --cat-monument:#6B2E3B; --cat-natura:#3F5B44; --cat-activitat:#1C5D8C; --cat-curiositat:#6B4E8C;
  --focus:#1C5D8C;
  --radius-sm:3px;
  --shadow-card:0 1px 2px rgba(32,30,34,.06), 0 6px 16px -10px rgba(32,30,34,.22);
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Karla', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Space Mono', 'SFMono-Regular', Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15171A; --bg-elevated:#1D2023; --bg-sunken:#101214;
    --ink:#ECE7DA; --ink-soft:#B3AB98; --ink-faint:#78725F;
    --line:#33363A; --line-strong:#454850;
    --accent:#E2584A; --accent-ink:#F0776B;
    --gold:#D7A24A; --silver:#A9A398; --bronze:#C07A4E;
    --cat-poble:#C79A5C; --cat-monument:#B06B80; --cat-natura:#7CA687; --cat-activitat:#6FADDA; --cat-curiositat:#B39BDB;
    --focus:#6FADDA;
    --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#15171A; --bg-elevated:#1D2023; --bg-sunken:#101214;
  --ink:#ECE7DA; --ink-soft:#B3AB98; --ink-faint:#78725F;
  --line:#33363A; --line-strong:#454850;
  --accent:#E2584A; --accent-ink:#F0776B;
  --gold:#D7A24A; --silver:#A9A398; --bronze:#C07A4E;
  --cat-poble:#C79A5C; --cat-monument:#B06B80; --cat-natura:#7CA687; --cat-activitat:#6FADDA; --cat-curiositat:#B39BDB;
  --focus:#6FADDA;
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -12px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance}
p{margin:0}
a{color:var(--accent-ink)}
button{font:inherit; color:inherit}
.ic{width:16px;height:16px;flex:none;color:currentColor}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

#app{max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,40px) 80px}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(48px,9vw,96px) 0 clamp(150px,26vw,230px); margin:0 clamp(-16px,-4vw,-40px); padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}
.hero-scene{position:absolute; left:0; right:0; bottom:0; width:100%; height:clamp(150px,26vw,230px); z-index:0; display:block}
.hero-scene .sun{fill:var(--gold); opacity:.35}
.hero-scene .ridge{fill:var(--cat-natura); opacity:.28}
.hero-scene .hills{fill:var(--cat-poble); opacity:.32}
.hero-scene .vines{stroke:var(--cat-poble); stroke-width:1; opacity:.3; fill:none}
.hero-scene .skyline{fill:var(--ink); opacity:.68}
.hero-scene .skyline .accent{fill:var(--accent-ink); opacity:.9}
.hero-inner{position:relative; z-index:1; max-width:760px; animation:rise .7s ease-out both}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
.eyebrow{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 18px; display:flex; align-items:center; gap:.5em;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--line-strong); display:inline-block}
.hero h1{font-size:clamp(2.5rem,5vw + 1rem,4.4rem); line-height:1.02; letter-spacing:-.01em}
.hero h1 em{font-style:italic; color:var(--accent-ink)}
.hero-sub{font-size:clamp(1.02rem,.4vw + .95rem,1.2rem); color:var(--ink-soft); margin-top:18px; max-width:56ch; line-height:1.6}
.hero-stats{font-family:var(--font-mono); font-size:.85rem; color:var(--ink-soft); margin-top:26px; display:flex; flex-wrap:wrap; gap:.4em 1.1em; font-variant-numeric:tabular-nums}
.hero-stats b{color:var(--ink); font-weight:700}

/* ---------- User bar ---------- */
.user-bar{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.user-bar-inner{display:flex; gap:8px}
.user-bar-btn{
  border:1px solid var(--line-strong); background:var(--bg-elevated); color:var(--ink);
  padding:7px 14px; border-radius:20px; font-size:.82rem; font-weight:600; cursor:pointer;
}
.user-bar-btn:hover{border-color:var(--accent); color:var(--accent-ink)}
.user-bar-btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.user-bar-name{font-size:.82rem; color:var(--ink-soft); align-self:center; font-weight:600}
.lang-switch{display:flex; gap:4px}
.lang-switch button{
  border:1px solid var(--line-strong); background:var(--bg-elevated); color:var(--ink-faint);
  padding:5px 9px; border-radius:14px; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  cursor:pointer; font-family:var(--font-mono);
}
.lang-switch button:hover{border-color:var(--accent); color:var(--accent-ink)}
.lang-switch button.active{background:var(--ink); border-color:var(--ink); color:var(--bg)}

/* ---------- Toolbar ---------- */
.toolbar{
  position:sticky; top:0; z-index:20; background:var(--bg-elevated);
  border-bottom:1px solid var(--line); border-top:1px solid var(--line);
  padding:14px 0; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center;
  margin:0 clamp(-16px,-4vw,-40px); padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px);
}
.tabs{display:flex; gap:4px; background:var(--bg-sunken); padding:3px; border-radius:5px; flex:none}
.tab{
  border:none; background:none; padding:7px 14px; border-radius:3px; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:.88rem; color:var(--ink-soft);
}
.tab.active{background:var(--bg-elevated); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{
  border:1px solid var(--line-strong); background:var(--bg-elevated); color:var(--ink-soft);
  padding:6px 13px; border-radius:20px; font-size:.82rem; font-weight:600; cursor:pointer;
  display:flex; align-items:center; gap:6px; transition:border-color .15s, color .15s;
}
.pill:hover{border-color:var(--ink-soft); color:var(--ink)}
.pill.active{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.search-wrap{flex:1 1 220px; min-width:180px; margin-left:auto}
#search{
  width:100%; padding:8px 12px; border:1px solid var(--line-strong); border-radius:5px;
  background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:.9rem;
}
#search::placeholder{color:var(--ink-faint)}
button:focus-visible, a:focus-visible, input:focus-visible, .card:focus-visible, .rank-row:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

.verify-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:.85rem; color:var(--accent-ink); background:var(--bg-sunken); border:1px solid var(--accent);
  border-radius:5px; padding:10px 14px; margin-top:14px;
}
.verify-banner button{
  border:1px solid var(--accent); background:none; color:var(--accent-ink); border-radius:4px;
  padding:5px 12px; font-weight:600; font-size:.82rem; cursor:pointer; font-family:var(--font-body);
}
.verify-banner button:hover{background:var(--accent); color:#fff}
.vote-status{
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); margin-top:14px;
  font-variant-numeric:tabular-nums;
}
.vote-note{
  font-size:.85rem; background:var(--bg-sunken); color:var(--ink-soft); border:1px solid var(--line);
  border-radius:5px; padding:10px 14px; margin-top:10px;
}
.vote-btn.is-voted{color:var(--ink-faint); border-color:var(--line)}
.vote-btn.is-voted .ic{color:var(--ink-faint)}
.vote-btn:disabled{cursor:default; opacity:.75}

/* ---------- Result count ---------- */
.result-count{
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint); margin:22px 0 14px;
  font-variant-numeric:tabular-nums;
}

/* ---------- Grid & cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:18px}
.card{
  background:var(--bg-elevated); border:1px solid var(--line); box-shadow:var(--shadow-card);
  padding:18px 18px 16px; display:flex; flex-direction:column; gap:8px; cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.card:hover{box-shadow:0 2px 4px rgba(32,30,34,.08), 0 10px 22px -10px rgba(32,30,34,.3)}
.card-photo{
  display:block; width:calc(100% + 36px); margin:-18px -18px 4px; aspect-ratio:16/10;
  object-fit:cover; background:var(--bg-sunken);
}
.cat-badge{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px 4px 7px; border-radius:2px; font-weight:700;
}
.cat-poble{background:color-mix(in srgb, var(--cat-poble) 16%, transparent); color:var(--cat-poble)}
.cat-monument{background:color-mix(in srgb, var(--cat-monument) 16%, transparent); color:var(--cat-monument)}
.cat-natura{background:color-mix(in srgb, var(--cat-natura) 16%, transparent); color:var(--cat-natura)}
.cat-activitat{background:color-mix(in srgb, var(--cat-activitat) 16%, transparent); color:var(--cat-activitat)}
.cat-curiositat{background:color-mix(in srgb, var(--cat-curiositat) 16%, transparent); color:var(--cat-curiositat)}
.card-title{font-size:1.14rem; line-height:1.25; margin-top:2px}
.card-place{font-size:.78rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; font-weight:600}
.card-dates, .detail-dates{display:flex; align-items:center; gap:5px; font-size:.78rem; color:var(--gold); font-weight:600}
.card-dates .ic, .detail-dates .ic{color:var(--gold); width:14px; height:14px}
.card-desc{font-size:.92rem; color:var(--ink-soft); line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card-actions{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line)}
.btn-link{
  display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:700;
  color:var(--ink-soft); text-decoration:none; padding:6px 8px; border-radius:3px;
}
.btn-link:hover{background:var(--bg-sunken); color:var(--ink)}
.vote-btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line-strong);
  background:var(--bg); border-radius:3px; padding:6px 10px; cursor:pointer; font-family:var(--font-mono);
  font-weight:700; font-size:.82rem; color:var(--ink); font-variant-numeric:tabular-nums;
}
.vote-btn .ic{color:var(--accent)}
.vote-btn:hover{border-color:var(--accent); color:var(--accent-ink)}
.vote-btn:active .ic{transform:scale(1.15)}
.vote-btn.small{padding:5px 8px; font-size:.78rem}

.load-more{
  display:block; margin:34px auto 0; padding:11px 26px; background:none; border:1px solid var(--line-strong);
  border-radius:3px; cursor:pointer; font-weight:700; font-size:.88rem; color:var(--ink);
}
.load-more:hover{border-color:var(--accent); color:var(--accent-ink)}

/* ---------- Leaderboard ---------- */
.leaderboard{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:2px}
.rank-row{
  display:flex; align-items:center; gap:14px; padding:12px 14px; background:var(--bg-elevated);
  border:1px solid var(--line); border-top:none; cursor:pointer;
}
.rank-row:hover{background:var(--bg-sunken)}
.rank-thumb{width:44px; height:44px; object-fit:cover; border-radius:2px; flex:none; background:var(--bg-sunken)}
.rank-row:first-child{border-top:1px solid var(--line)}
.rank-num{
  font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:var(--ink-faint);
  width:2.1ch; text-align:right; flex:none; font-variant-numeric:tabular-nums;
}
.rank-row.is-medal .rank-num{font-size:1.5rem}
.medal-1 .rank-num{color:var(--gold)}
.medal-2 .rank-num{color:var(--silver)}
.medal-3 .rank-num{color:var(--bronze)}
.rank-icon{color:var(--ink-faint); flex:none}
.rank-info{display:flex; flex-direction:column; min-width:0; flex:1}
.rank-name{font-weight:700; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rank-place{font-size:.76rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em}
.rank-row .btn-link{flex:none}
.rank-row .vote-btn{flex:none}

/* ---------- Footer ---------- */
.site-footer{margin-top:64px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:.82rem; line-height:1.6}
.footer-meta{margin-top:8px; font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* ---------- Detail modal ---------- */
dialog#detail-modal{
  border:none; padding:0; border-radius:4px; max-width:640px; width:92vw; max-height:88vh;
  background:var(--bg-elevated); color:var(--ink); box-shadow:0 20px 60px -20px rgba(0,0,0,.5);
  overscroll-behavior:contain;
}
dialog#detail-modal::backdrop{background:rgba(20,18,16,.6)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) dialog#detail-modal::backdrop{background:rgba(0,0,0,.72)}
}
:root[data-theme="dark"] dialog#detail-modal::backdrop{background:rgba(0,0,0,.72)}
.detail-close{
  position:absolute; top:12px; right:12px; z-index:2; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--bg-elevated); color:var(--ink);
  cursor:pointer; font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.detail-close:hover{border-color:var(--accent); color:var(--accent-ink)}
.detail-photo{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--bg-sunken)}
.detail-body{padding:22px 24px 24px}
.detail-title{font-size:1.6rem; margin-top:10px}
.detail-place{font-size:.8rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; font-weight:600; margin-top:4px}
.detail-desc{font-size:1rem; color:var(--ink-soft); line-height:1.65; margin-top:14px}
.detail-credit{font-size:.74rem; color:var(--ink-faint); margin-top:10px; line-height:1.5}
.detail-credit a{color:var(--ink-faint); text-decoration:underline}
.detail-actions{display:flex; align-items:center; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}

/* ---------- Auth modal ---------- */
dialog#auth-modal{
  border:none; padding:0; border-radius:4px; max-width:380px; width:90vw;
  background:var(--bg-elevated); color:var(--ink); box-shadow:0 20px 60px -20px rgba(0,0,0,.5);
}
dialog#auth-modal::backdrop{background:rgba(20,18,16,.6)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) dialog#auth-modal::backdrop{background:rgba(0,0,0,.72)}
}
:root[data-theme="dark"] dialog#auth-modal::backdrop{background:rgba(0,0,0,.72)}
.auth-body{padding:26px 24px 24px}
.auth-tabs{display:flex; gap:4px; background:var(--bg-sunken); padding:3px; border-radius:5px; margin-bottom:18px}
.auth-tab{flex:1; border:none; background:none; padding:8px; border-radius:3px; cursor:pointer; font-weight:600; font-size:.85rem; color:var(--ink-soft)}
.auth-tab.active{background:var(--bg-elevated); color:var(--ink)}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.field label{font-size:.78rem; font-weight:600; color:var(--ink-soft)}
.field input, .field textarea, .field select{
  padding:9px 11px; border:1px solid var(--line-strong); border-radius:4px; background:var(--bg);
  color:var(--ink); font-family:var(--font-body); font-size:.95rem; resize:vertical;
}
dialog#manage-modal{
  border:none; padding:0; border-radius:4px; max-width:460px; width:90vw; max-height:88vh; overflow-y:auto;
  background:var(--bg-elevated); color:var(--ink); box-shadow:0 20px 60px -20px rgba(0,0,0,.5);
}
dialog#manage-modal::backdrop{background:rgba(20,18,16,.6)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) dialog#manage-modal::backdrop{background:rgba(0,0,0,.72)}
}
:root[data-theme="dark"] dialog#manage-modal::backdrop{background:rgba(0,0,0,.72)}
.field input[type="file"]{padding:7px 0; border:none; font-size:.85rem}
#manage-photo-preview img{width:100%; max-width:220px; aspect-ratio:16/10; object-fit:cover; border-radius:4px; display:block; margin-bottom:8px; background:var(--bg-sunken)}
.field-check{margin-bottom:14px; font-size:.82rem; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start}
.field-check label{display:flex; gap:8px; align-items:flex-start; cursor:pointer}
.field-check input{margin-top:3px}
.auth-submit{
  width:100%; padding:11px; border:none; border-radius:4px; background:var(--accent); color:#fff;
  font-weight:700; font-size:.92rem; cursor:pointer; margin-top:4px;
}
.auth-submit:hover{background:var(--accent-ink)}
.auth-error{color:var(--accent-ink); font-size:.82rem; margin-top:10px; min-height:1.2em}
.auth-ok{color:var(--gold); font-size:.9rem; margin-top:10px; font-weight:600}

/* ---------- Propose-a-place / inbox modals ---------- */
dialog#propose-modal{
  border:none; padding:0; border-radius:4px; max-width:460px; width:90vw; max-height:88vh; overflow-y:auto;
  background:var(--bg-elevated); color:var(--ink); box-shadow:0 20px 60px -20px rgba(0,0,0,.5);
}
dialog#propose-modal::backdrop{background:rgba(20,18,16,.6)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) dialog#propose-modal::backdrop{background:rgba(0,0,0,.72)}
}
:root[data-theme="dark"] dialog#propose-modal::backdrop{background:rgba(0,0,0,.72)}

dialog#inbox-modal{
  border:none; padding:0; border-radius:4px; max-width:640px; width:92vw; max-height:88vh; overflow-y:auto;
  background:var(--bg-elevated); color:var(--ink); box-shadow:0 20px 60px -20px rgba(0,0,0,.5);
}
dialog#inbox-modal::backdrop{background:rgba(20,18,16,.6)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) dialog#inbox-modal::backdrop{background:rgba(0,0,0,.72)}
}
:root[data-theme="dark"] dialog#inbox-modal::backdrop{background:rgba(0,0,0,.72)}
.inbox-section{margin-bottom:24px}
.inbox-section:last-child{margin-bottom:0}
.inbox-section h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin:0 0 8px; font-weight:700}
.inbox-item{display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line)}
.inbox-item:first-child{border-top:none}
.inbox-thumb{width:64px; height:64px; object-fit:cover; border-radius:4px; background:var(--bg-sunken); flex:none}
.inbox-body{flex:1; min-width:0}
.inbox-title{font-weight:700; font-size:.92rem}
.inbox-meta{font-size:.74rem; color:var(--ink-faint); margin-top:2px}
.inbox-note{font-size:.85rem; color:var(--ink-soft); margin-top:6px; line-height:1.5}
.inbox-actions{display:flex; align-items:center; gap:8px; margin-top:10px}
.inbox-actions button{padding:7px 14px; border-radius:4px; border:1px solid var(--line-strong); background:none; color:var(--ink); font-weight:600; font-size:.8rem; cursor:pointer; font-family:var(--font-body);}
.inbox-actions button:hover{border-color:var(--accent); color:var(--accent-ink)}
.inbox-actions button.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.inbox-actions button.primary:hover{background:var(--accent-ink); border-color:var(--accent-ink); color:#fff}
.inbox-empty{color:var(--ink-faint); font-size:.85rem; padding:4px 0 8px}

@media (max-width:560px){
  .toolbar{position:static}
  .search-wrap{margin-left:0; flex-basis:100%}
  .grid{grid-template-columns:1fr}
  dialog#detail-modal{width:96vw; max-height:92vh}
}