/* Additions for the fun map on top of styles.css */

.fun-bar { display: flex; gap: 8px; }
.fun-bar .btn { height: 52px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); padding: 0 16px; }
.fun-bar .btn.primary { background: var(--accent); color: #fff; }
#panel:not(.compact) .fun-bar .btn { box-shadow: none; background: var(--surface-2); }
@media (min-width: 900px) {
  #panel.compact .fun-bar { padding: 8px; }
  #panel.compact .fun-bar .btn { box-shadow: none; background: var(--surface-2); }
  #panel.compact .fun-bar .btn.primary { background: var(--accent); }
}

.tabs { display: flex; gap: 4px; margin: 12px 12px 4px; padding: 4px; border-radius: 16px; background: var(--surface-2); }
.tab { flex: 1; height: 36px; border-radius: 12px; font-weight: 600; color: var(--secondary); }
.tab.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }

.rank { width: 28px; text-align: center; font-weight: 700; color: var(--secondary); flex-shrink: 0; }
.rank.gold { color: #d4a000; } .rank.silver { color: #8a96a3; } .rank.bronze { color: #b86b2e; }
.swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.net { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.net.pos { color: #2b8a3e; } .net.neg { color: #c92a2a; }

.zone-card { padding: 16px 12px 4px 16px; display: flex; gap: 12px; align-items: flex-start; }
.zone-card .swatch { width: 14px; height: 14px; margin-top: 8px; }
.zone-card .texts { flex: 1; min-width: 0; }
.zone-card h2 { margin: 0 0 2px; font-size: 22px; line-height: 28px; overflow-wrap: anywhere; }
.zone-card .meta { color: var(--secondary); font-size: 14px; }
.zone-card .desc { margin: 8px 0 0; font-size: 15px; line-height: 21px; overflow-wrap: anywhere; }
.tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; vertical-align: middle; }

.room-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 4px; }
.room-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 4px; border-radius: 14px; background: var(--surface-2); font-size: 13px; }
.room-chip img { width: 20px; height: 20px; }
.room-chip .x { margin-left: 2px; color: var(--secondary); }

.votes { display: flex; gap: 8px; padding: 8px 16px 16px; }
.vote-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 22px; background: var(--surface-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.vote-btn.up.on { background: #d3f9d8; color: #2b8a3e; }
.vote-btn.down.on { background: #ffe3e3; color: #c92a2a; }
.votes .spacer { flex: 1; }

.form { padding: 4px 16px 8px; display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 13px; color: var(--secondary); display: flex; justify-content: space-between; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--surface-2); font-size: 16px; outline: none; resize: none;
}
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 2px var(--accent) inset; }
.error { margin: 0 16px; padding: 10px 14px; border-radius: 14px; background: #fff0f0; color: #c92a2a; font-size: 14px; }
.hint { padding: 0 16px 4px; color: var(--secondary); font-size: 14px; }
.footnote { padding: 8px 16px 14px; color: var(--secondary); font-size: 12px; }
.footnote button { color: var(--accent); font-size: 12px; }

.modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(20, 22, 26, .45); }
.modal-card { width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 24px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); }
.modal-card h2 { margin: 4px 0 8px; font-size: 24px; }
.modal-card p, .modal-card li { font-size: 15px; line-height: 21px; }
.modal-card ul { padding-left: 20px; margin: 8px 0 12px; }
.modal-card .btn { width: 100%; margin-top: 8px; }
.modal-emoji { font-size: 40px; }
.muted { color: var(--secondary); }
.muted a { color: var(--accent); }

/* Live presence */
#online-pill { top: calc(60px + var(--safe-top)); left: 12px; gap: 8px; padding: 6px 8px 6px 12px; font-size: 13px; font-weight: 600; cursor: default; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f9e44; box-shadow: 0 0 0 3px rgba(47, 158, 68, .2); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 6px rgba(47, 158, 68, 0); } }
.avatars { display: flex; }
.avatars:empty { display: none; }
.avatars span { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-size: 11px; }
.avatars span:first-child { margin-left: 0; }
@media (min-width: 900px) {
  #online-pill { top: calc(12px + var(--safe-top)); left: auto; right: 76px; }
}
body[data-mode="search"] #online-pill { display: none; }

.peer-cursor { position: relative; pointer-events: none; transition: opacity .3s; }
.peer-cursor.mouse svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.peer-cursor .peer-name {
  position: absolute; left: 16px; top: 16px; padding: 2px 8px; border-radius: 10px; background: var(--c); color: #fff;
  font: 600 12px/18px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.peer-cursor.view .peer-dot {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid #fff;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 25%, transparent);
}
.peer-cursor.view .peer-name { left: 12px; top: 6px; }
.peer-cursor.other-level { opacity: .35; }
.peer-cursor.idle { opacity: .5; }
.peer-cursor.other-level.idle { opacity: .25; }