/* Auto Town — estilos de la versión 2 */
.pill { position: relative; }
.pill-plus { position: absolute; right: -8px; top: -6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: var(--green); color: #fff; font-weight: 700; font-size: 15px; line-height: 1; padding: 0; box-shadow: 0 2px 0 rgba(0,0,0,.25); }

/* misiones */
#goals { position: absolute; left: 12px; top: 60px; display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.goal { width: 62px; height: 62px; border-radius: 50%; border: 0; padding: 0; background: none; position: relative; transition: transform .15s; }
.goal:hover { transform: scale(1.08); }
.goal-ring { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.goal-ico { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(#ffffff, #dcecf9); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.goal.done { animation: glow 1.2s infinite; border-radius: 50%; }
.goal-check { position: absolute; right: -4px; bottom: -2px; background: var(--green); color: #fff; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }

/* pisos y evento */
#floor-switch { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; background: #fff; border-radius: 16px; padding: 4px; box-shadow: 0 4px 0 rgba(0,0,0,.2); z-index: 2; }
.fs-btn { border: 0; background: none; padding: 7px 14px; border-radius: 12px; font-weight: 700; color: var(--blue-d); }
.fs-btn.on { background: var(--purple); color: #fff; }
#event-banner { position: absolute; left: 86px; top: 12px; background: rgba(255,255,255,.95); border-radius: 14px; padding: 6px 12px; font-weight: 700; font-size: 13px; box-shadow: 0 4px 0 rgba(0,0,0,.18); z-index: 2; max-width: calc(100% - 180px); }
#event-banner.ev-halloween { background: linear-gradient(90deg, #ff9a3c, #ffd27a); color: #3a1a4a; }
#event-banner.ev-navidad { background: linear-gradient(90deg, #e8f4ff, #ffffff); color: #b02a2a; }
#event-banner.ev-sanvalentin { background: linear-gradient(90deg, #ffd1e1, #fff); color: #b0275c; }
#event-banner.ev-verano { background: linear-gradient(90deg, #fff1a8, #bff3ff); color: #1a5a7a; }
body.editing #event-banner, body.visiting #event-banner { display: none !important; }

/* logros y perfil */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ach { background: var(--panel2); border-radius: 14px; padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ach.off { opacity: .55; }
.ach b { font-size: 13px; }
.ach-badge { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; border: 4px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.ach-badge.big { width: 110px; height: 110px; font-size: 56px; margin: 0 auto 6px; animation: spinin .6s; }
.pbar.thin { height: 8px; width: 100%; margin: 2px 0; border-width: 1px; }
.prof-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.avatar.big { width: 72px; height: 72px; font-size: 34px; border-radius: 18px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.stat-cell { background: var(--panel2); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.stat-cell b { font-size: 22px; color: var(--blue-d); }
#hud-avatar { cursor: pointer; }

/* muro */
.wall-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.wall-post { display: flex; gap: 10px; background: var(--panel2); border-radius: 12px; padding: 8px 10px; align-items: flex-start; }
.wall-post .avatar { width: 36px; height: 36px; font-size: 16px; }
.wp-body { flex: 1; word-break: break-word; user-select: text; }
.wp-del { border: 0; background: none; color: var(--muted); font-size: 14px; }
.row .inp { flex: 1; min-width: 180px; }

/* colecciones */
.col-row { background: var(--panel2); border-radius: 16px; padding: 10px 12px; margin-bottom: 10px; border: 3px solid transparent; }
.col-row.complete { border-color: var(--green); background: #eafbe8; }
.col-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.col-ico { font-size: 26px; }
.col-parts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 6px; }
.part { background: #fff; border-radius: 12px; padding: 6px; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 3px 0 #c9dcef; }
.part.missing .part-ico { filter: grayscale(1) opacity(.35); }
.part-ico { font-size: 30px; }
.part small { font-size: 11px; font-weight: 600; }
.part-q { position: absolute; top: 4px; right: 6px; font-weight: 700; font-size: 12px; color: var(--blue-d); }
.part .rare { position: absolute; top: 4px; left: 4px; background: var(--purple); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 6px; }
.part .ask { border: 0; background: var(--orange); color: #fff; border-radius: 8px; font-size: 11px; font-weight: 700; padding: 2px 8px; }

/* regalos */
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.gift-opt { border: 3px solid #c9dcef; background: #fff; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gift-opt span { font-size: 30px; }
.gift-opt.on { border-color: var(--orange); background: #fff3dc; }
label.friend-row { cursor: pointer; }

/* torneo y retos */
.tourney-head { background: var(--panel2); border-radius: 16px; padding: 12px; text-align: center; }
.tourney-head.live { background: linear-gradient(#fff3dc, #ffe1b0); }
.tourney-head .big-timer { font-size: 28px; }
.prize { background: #fff; border-radius: 12px; padding: 6px 10px; display: flex; gap: 6px; align-items: center; box-shadow: 0 3px 0 #c9dcef; }
.pink-row { display: flex; align-items: center; gap: 10px; background: var(--panel2); border-radius: 16px; padding: 8px; margin-top: 10px; }
.pink-row.done, .pink-row.declined, .pink-row.cancelled { opacity: .7; }
.pink-side { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pink-mid { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pink-car { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.rr-pink { font-size: 20px; font-weight: 700; margin: 6px 0; color: var(--purple); }

/* monedas azules */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.pack { border: 3px solid #c9dcef; background: linear-gradient(#ffffff, #eaf4fd); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16px; }
.pack:hover { border-color: var(--blue); }
.pack-ico { font-size: 40px; }
.pack-price { background: var(--green); color: #fff; font-weight: 700; border-radius: 10px; padding: 3px 10px; }
#pp-buttons { max-width: 360px; margin: 10px auto; }

/* paseo por la ciudad */
.town-screen { position: fixed; inset: 0; z-index: 80; background: #86c96a; }
.town-screen > canvas:first-child { position: absolute; inset: 0; }
.town-hud { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.town-title { background: #fff; border-radius: 14px; padding: 6px 14px; font-weight: 700; font-size: 18px; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.town-count { background: var(--navy); color: #fff; border-radius: 12px; padding: 5px 12px; font-weight: 700; align-self: flex-start; }
.town-hint { background: rgba(255,255,255,.9); border-radius: 10px; padding: 4px 10px; font-size: 13px; align-self: flex-start; }
.town-map { position: absolute; right: 70px; top: 14px; background: rgba(255,255,255,.85); border-radius: 14px; border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.town-pad { position: absolute; right: 24px; bottom: 24px; display: grid; grid-template-columns: 64px 64px 64px; grid-template-rows: 64px 64px; gap: 6px; }
.town-pad button { border: 4px solid #fff; border-radius: 16px; background: linear-gradient(#5ab0f5, #2373c4); color: #fff; font-size: 24px; box-shadow: 0 5px 0 rgba(0,0,0,.3); touch-action: none; }
.town-pad button[data-k="up"] { grid-column: 2; grid-row: 1; }
.town-pad button[data-k="left"] { grid-column: 1; grid-row: 2; }
.town-pad button[data-k="down"] { grid-column: 2; grid-row: 2; }
.town-pad button[data-k="right"] { grid-column: 3; grid-row: 2; }
.town-car { position: absolute; left: 14px; bottom: 20px; font-weight: 700; }

@media (max-width: 760px) {
  #goals { top: 54px; left: 6px; gap: 6px; }
  .goal { width: 48px; height: 48px; }
  .goal-ico { width: 38px; height: 38px; font-size: 20px; }
  #event-banner { left: 60px; font-size: 11px; max-width: calc(100% - 110px); }
  .col-parts { grid-template-columns: repeat(3, 1fr); }
  .town-map { right: 60px; transform: scale(.75); transform-origin: top right; }
  .town-pad { grid-template-columns: 54px 54px 54px; grid-template-rows: 54px 54px; }
  #btn-install, #btn-notify { display: none !important; }
}