/* ALL visual decisions live in this file. COLORS / SHAPES: change the variables in :root (light) and in the dark block below; every button, card and form follows them. --nav = height of the phone icon bar. --w = max content width on phones.
   LAYOUT (wide screens, @media blocks at the end): left bar | main column | right column. Widths: --railw (left bar, collapsed 88px / expanded 275px),
   --mainw (feed column), --sidew (right column). Pages with two panes (chat, profile) have no right column and a wider main column. */
:root { --bg:#f3f2ee; --surface:#ffffff; --fg:#17171b; --mute:#6a6a72; --line:#e0ded6; --nav:56px; --w:560px; --stick:0px;
  /* LOOK: warm paper canvas (--bg), white cards (--surface), ink text (--fg), ONE accent. Font: Inter (loaded in index.html), falls back to the system font */
  --font:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* the accent ("volt" lime) is only ever a FILL (main buttons, badges, unread counts, your chat bubbles, highlights) with dark text on it (--on-accent), never text color */
  --accent:#c8f23d; --on-accent:#17171b; --me:var(--accent); --alert:#ff4d4d; --repost:#00ba7c; --danger:#d33; --online:#22c55e; --read:#0a6b52;
  --gold:#e6b422; --silver:#9ca3af; --bronze:#cd7f32;
  /* shapes: buttons (every <button> follows --r-btn), inputs, cards / dialogs / menus, chips */
  --r-btn:10px; --r-sm:8px; --r-md:14px; --r-pill:999px;
  /* hover / quote background and the one shadow used by floating things */
  --soft:rgba(127,127,127,.16); --shadow:0 6px 20px rgba(0,0,0,.2); }
@media (prefers-color-scheme: dark) { :root { --bg:#111113; --surface:#1a1a1e; --fg:#f2f2ee; --mute:#9c9ca4; --line:#2c2c32; --shadow:0 6px 20px rgba(0,0,0,.5); } }
* { box-sizing: border-box; }
html { scrollbar-gutter:stable; } /* the scrollbar space is always reserved: pages that scroll and pages that do not line up exactly, nothing shifts sideways */
body { margin:0; min-height:100dvh; background:var(--bg); color:var(--fg); font:16px/1.45 var(--font); -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
h1, h2 { margin:0; font-weight:600; letter-spacing:-.02em; }
h2 { font-size:1.6rem; }
button, input, select, textarea { padding:12px; border:1px solid var(--line); border-radius:var(--r-sm); background:none; color:inherit; font:inherit; }
button { cursor:pointer; border-radius:var(--r-btn); }
input, select, textarea { background:var(--surface); }
button:hover, button:focus-visible, input:focus, select:focus, textarea:focus { border-color:var(--fg); outline:none; }
input[type="search"] { border-radius:var(--r-btn); padding-inline:16px; }
option { color:#15151a; }
textarea { resize:vertical; min-height:80px; }
#err { color:var(--danger); font-size:14px; }
.mute { color:var(--mute); }
.mono { font:12px monospace; word-break:break-all; }
/* Main action button (Publicar...): filled, pill-shaped. Change the look of every main button here */
.primary { border-color:var(--accent); background:var(--accent); color:var(--on-accent); font-weight:600; }
.primary:disabled { opacity:.5; cursor:default; }
/* Icons drawn with inline <svg class="ico"> (stroke icons, they follow the text color) */
.ico, nav svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Form fields: the label sits ABOVE the control (never a placeholder acting as a label). Used by sign up and edit profile. */
.field { display:grid; gap:4px; text-align:left; }
.field > span:first-child { color:var(--mute); font-size:.875rem; }

/* login + signup */
.center { display:grid; gap:12px; width:min(320px,90vw); margin:0 auto; padding:24px 0; min-height:100dvh; align-content:center; text-align:center; }

/* APP SHELL. Phones: bottom icon bar (Home, Tournaments, Games, Chat, Me, buscar, bell). Wide screens: it becomes the LEFT bar with labels (see @media at the end).
   Icon color: --mute (idle) / --fg (current). Logo: put an <img> inside the Home link (see "nav img"). */
.tab, #notif { display:grid; gap:12px; max-width:var(--w); margin:0 auto; padding:20px 16px calc(var(--nav) + 24px + env(safe-area-inset-bottom)); }
nav { position:fixed; inset:auto 0 0; display:flex; height:calc(var(--nav) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--surface); border-top:1px solid var(--line); }
nav a { position:relative; flex:1; display:grid; place-items:center; color:var(--mute); text-decoration:none; }
nav a[aria-current] { color:var(--fg); box-shadow:inset 0 2px var(--fg); }
nav a:focus-visible { outline:2px solid var(--fg); outline-offset:-4px; }
nav img { width:28px; height:28px; border-radius:6px; }
/* Phone order: Home, Tournaments, Games, Chat, Me, buscar, bell (the HTML order is the wide-screen order) */
nav .me { order:5; }
nav a[href="/home/buscar"] { order:6; }
nav a[href="/home/notificaciones"] { order:7; }
/* Only on wide screens: text labels, profile name, bar buttons, right column */
.label, .who, .rail-only, .rail-more, #side { display:none; }
.rail-foot { display:contents; }
/* Red dot on the bell (unread notifications) and on Chat (unread messages) */
body[data-unread] nav a[href="/home/notificaciones"]::after, body[data-chat] nav a[href="/chat"]::after { content:""; position:absolute; top:12px; left:calc(50% + 4px); width:8px; height:8px; border-radius:50%; background:var(--alert); }

/* Profile card: shared by the Me tab and the profile screen (profileEl in profile.js) */
.profile { display:grid; gap:12px; }
.profile .follow { justify-self:start; }
.head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.row { display:flex; flex-wrap:wrap; gap:4px 16px; }
p { margin:0; }
#tab-profile { position:relative; }
.back { position:absolute; top:calc(12px + var(--stick)); left:16px; z-index:2; padding:4px 12px; background:var(--bg); color:var(--fg); }
#prof-head > p { margin-top:32px; }

/* PROFILE PHOTO (photo_url): banner behind name, #rank, @username and tournament, from the very top of the screen.
   Ratio 2.35:1 (change aspect-ratio below: 16/9 = taller, 3/1 = flatter).
   FADE: --fade-from = where the fade starts, --fade-to = where the photo is fully invisible.
   Both are measured from the TOP edge of the photo (0% = top, 100% = bottom).
     default 75% -> 100%       : top 3/4 fully visible, fades only in the bottom quarter
     --fade-from 40%           : fade starts higher, more of the photo dissolves
     --fade-from 0%            : soft from the very first pixel
     --fade-from 85%, to 95%   : sharper, "just a bit" of fade
     --fade-to 90%             : photo disappears before reaching the bottom edge */
.hero { --fade-from:75%; --fade-to:100%; position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; margin:-20px -16px 0; padding:20px 16px 4px; }
.hero.has-pic { aspect-ratio:2.35/1; text-shadow:0 1px 6px var(--bg); }
#tab-profile .hero { padding-top:52px; }
.hero > * { position:relative; }
.hero > .hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%;
  -webkit-mask-image:linear-gradient(to bottom, #000 var(--fade-from), transparent var(--fade-to));
  mask-image:linear-gradient(to bottom, #000 var(--fade-from), transparent var(--fade-to)); }

/* Buscar (user results) */
.user { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
.link { cursor:pointer; }

/* Tournaments */
.stack { display:grid; gap:12px; }
.subtabs { position:sticky; top:var(--stick); z-index:1; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin:-20px -16px 0; background:var(--bg); border-bottom:1px solid var(--line); }
.subtabs a { padding:14px 4px; text-align:center; color:var(--mute); text-decoration:none; font-size:14px; }
.subtabs a[aria-current] { color:var(--fg); font-weight:600; box-shadow:inset 0 -2px var(--fg); }
.sec { margin-top:8px; color:var(--mute); font-size:.75rem; font-weight:600; letter-spacing:.08em; } /* small caps label above a group, like "TORNEO ACTUAL" */
.card { position:relative; display:flex; align-items:flex-end; aspect-ratio:16/9; overflow:hidden; padding:16px; border-radius:var(--r-md); color:#fff; text-decoration:none; text-shadow:0 1px 4px rgba(0,0,0,.45); }
.card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card div { position:relative; display:grid; gap:2px; }
.card strong { font-size:1.4rem; line-height:1.15; }

/* Posiciones (.rk also styles the rank in the profile card) */
.player { border-radius:var(--r-md); background:var(--surface); display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:12px 16px; text-align:left; }
.player strong { display:block; overflow-wrap:anywhere; font-size:1.1rem; }
.player .row { font-size:.875rem; }
.rk { font-weight:700; }
.player .rk { font-size:1.25rem; }
.rk[data-r="1"] { font-size:2.8rem; color:var(--gold); }
.rk[data-r="2"], .rk[data-r="3"] { font-size:2.1rem; }
.rk[data-r="2"] { color:var(--silver); }
.rk[data-r="3"] { color:var(--bronze); }

/* Campeones (hall of fame) */
.hof { display:grid; justify-items:center; text-align:center; }
.hof-item { overflow-wrap:anywhere; display:grid; justify-items:center; gap:6px; width:100%; padding:28px 16px; border:0; border-radius:0; background:none; -webkit-tap-highlight-color:transparent; }
.hof-item:not(.big) + .hof-item { border-top:1px solid var(--line); }
.fig { position:relative; }
.pic { display:grid; place-items:center; width:160px; height:160px; border-radius:50%; object-fit:cover; background:var(--line); font-size:3rem; font-weight:600; }
.hof-item:not(.big) .pic { width:80px; height:80px; font-size:1.5rem; }
.tag { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:max-content; max-width:min(240px,85vw); padding:4px 14px; border-radius:16px; background:rgba(0,0,0,.6); color:#fff; overflow-wrap:anywhere; }
.hof-name { font-size:1.05rem; margin-top:6px; }
.hof-title { font-size:.8rem; letter-spacing:.08em; color:var(--mute); }
.big .hof-title { font-size:1rem; font-weight:700; color:var(--gold); }
.hof-info { max-width:36ch; font-size:.9rem; }
.big .hof-info { font-size:1rem; }
.hof-more { width:100%; margin:0; padding:20px 0 4px; border-top:1px solid var(--line); color:var(--mute); }
.hof-empty { padding:64px 0; }
.hof-empty h2 { font-size:1.9rem; font-weight:700; }

/* New post box at the top of the feed (avatar, text, image icon, Publicar). The image icon does nothing yet. */
.compose { display:grid; grid-template-columns:auto 1fr; gap:12px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.compose-main { position:relative; display:grid; gap:8px; min-width:0; }
.compose .rich { min-height:48px; max-height:240px; padding:8px 0; border:0; font-size:1.1rem; }
.compose-bar { display:flex; justify-content:space-between; align-items:center; }
.compose-bar .primary { padding:8px 18px; }
#home-av .pic, #rail-av .pic { width:44px; height:44px; font-size:1.1rem; }
/* "Nuevas actualizaciones": a solid pill that floats above the feed while you scroll (never over the post box) */
.new-posts { position:sticky; top:12px; z-index:5; justify-self:center; padding:8px 18px; box-shadow:var(--shadow); }

/* Short event card (evcard.js): title, modalidad / dates / game and the first positions of my current stage.
   ONE card: right column on big screens, first item of the feed otherwise. The rows are the same list as the event screen, in compact form. */
#feed-top, #side-event { display:contents; }
.evcard { display:grid; gap:12px; padding:16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); cursor:pointer; }
#feed-top .evcard-body > .link-btn { display:none; } /* in the feed: no "Mostrar más", only "Ir al evento" */
.evcard > .link-btn { justify-self:start; }
.evcard-head { display:flex; align-items:center; justify-content:space-between; gap:12px; color:inherit; text-decoration:none; }
.evcard-head > div { display:grid; min-width:0; }
.evcard-head strong { font-size:1.05rem; overflow-wrap:anywhere; }
.evcard-head .post-sub { overflow-wrap:anywhere; }
.evcard .stack { gap:8px; }
.player.compact { padding:10px 14px; border:0; background:var(--soft); }
.player.compact strong { font-size:1rem; }
.player.compact .rk { font-size:1.1rem; }
/* button of an ad (feed.js) */
.cta { justify-self:start; padding:8px 18px; border-radius:var(--r-btn); background:var(--accent); color:var(--on-accent); font-weight:600; text-decoration:none; }
/* Admin panel: the titles Torneos / Ads / Avisos are clickable text; the current one is the dark one (adminpromos.js) */
.sw { cursor:pointer; color:var(--mute); }
.sw.on { color:var(--fg); }
/* chip next to the name of a post: "Anuncio" (ads / announcements, see feed.js) */
.label-chip { padding:2px 8px; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--mute); font-size:.75rem; font-weight:600; }

/* Feed */
.post { display:grid; gap:10px; padding:16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.post + .post { margin-top:12px; }
.post.tap { cursor:pointer; }
.post-head { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
.post .pic, .user .pic, .notif .pic { width:44px; height:44px; font-size:1.1rem; }
.post-meta { display:grid; min-width:0; }
.post-meta strong, .post-sub { overflow-wrap:anywhere; }
.post-sub { color:var(--mute); font-size:.875rem; }
.badge { display:inline-grid; place-items:center; width:16px; height:16px; margin-left:6px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:11px; vertical-align:middle; }
.post-side { display:flex; align-items:center; gap:4px; }
.follow { padding:6px 14px; font-size:.875rem; }
.post-body { white-space:pre-wrap; overflow-wrap:anywhere; }
.post-img { width:100%; max-height:420px; object-fit:cover; border-radius:var(--r-md); }
.post-actions { display:flex; justify-content:space-between; }
.act { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border:0; color:var(--mute); }
.act.like.on { color:var(--alert); }
#home-img[aria-pressed="true"] { color:var(--fg); }
.act.like.on svg { fill:currentColor; }
.act.repost.on { color:var(--repost); }
.menu-wrap { position:relative; }
.menu { position:absolute; right:0; top:100%; z-index:2; display:grid; min-width:140px; padding:4px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.menu.up { top:auto; bottom:100%; }
.menu button { border:0; text-align:left; }

/* Post screen: fixed top bar, comments, comment box pinned at the bottom (replaces the tab bar) */
#tab-post { --stick:0px; display:flex; flex-direction:column; min-height:100dvh; padding-bottom:0; }
#post-comments { flex:1; }
.topbar { position:sticky; top:var(--stick); z-index:2; display:flex; align-items:center; gap:12px; margin:-20px -16px 0; padding:8px 16px; padding-top:calc(8px + env(safe-area-inset-top)); background:var(--bg); border-bottom:1px solid var(--line); }
.topbar button { padding:4px 12px; }
.cm { display:grid; grid-template-columns:auto 1fr; gap:10px; padding:10px 0; }
.cm .pic { width:36px; height:36px; font-size:.95rem; }
.cm-main { display:grid; gap:2px; min-width:0; }
.cm-meta { display:flex; align-items:baseline; gap:8px; }
.cm-actions { display:flex; gap:4px; margin-left:-8px; }
.cm .act { padding:4px 8px; font-size:.875rem; }
.cm .act svg { width:16px; height:16px; }
.replies { margin-left:18px; padding-left:10px; border-left:2px solid var(--line); }
.replies.flat { margin-left:0; padding-left:0; border-left:0; }
.hl { animation:hl 2.5s ease-out; }
@keyframes hl { from { background:color-mix(in srgb, var(--accent) 20%, transparent); } }
.composer { position:sticky; bottom:0; z-index:2; display:grid; gap:6px; margin:0 -16px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line); }
.composer-row { display:flex; align-items:flex-end; gap:8px; }
#c-text { flex:1; height:48px; min-height:0; max-height:120px; resize:none; }
.reply-to { display:flex; justify-content:space-between; align-items:center; font-size:.875rem; }
.reply-to button { padding:2px 10px; border:0; }

/* Notifications (the red dot lives on the bell in the icon bar, see "APP SHELL") */
.notif { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; width:100%; padding:12px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; text-align:left; }
.notif.new { padding-left:12px; box-shadow:inset 3px 0 var(--accent); }
.notif-body { display:grid; min-width:0; overflow-wrap:anywhere; }

dialog { width:min(480px,92vw); padding:16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); color:var(--fg); }
dialog::backdrop { background:rgba(0,0,0,.5); }
dialog form { display:grid; gap:12px; }

/* In-app notification banner (a push that arrives while the app is on screen) */
.toast { position:fixed; top:calc(8px + max(var(--stick), env(safe-area-inset-top))); left:50%; z-index:10; display:grid; gap:2px; width:min(520px,calc(100vw - 16px)); transform:translateX(-50%); padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); text-align:left; box-shadow:var(--shadow); animation:drop .2s ease-out; }
.toast span { color:var(--mute); font-size:.875rem; overflow-wrap:anywhere; }
@keyframes drop { from { opacity:0; transform:translate(-50%,-12px); } }

/* @mention picker (js/mention.js) */
.mention-box { position:absolute; z-index:20; display:grid; max-height:240px; overflow-y:auto; padding:4px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow); }
.composer-row, dialog form { position:relative; }
.rich { min-height:96px; max-height:240px; padding:12px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-sm); outline:none; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; -webkit-user-select:text; }
.rich:focus { border-color:var(--fg); }
.rich:empty::before { content:attr(data-placeholder); color:var(--mute); pointer-events:none; }
.mention { padding:0 4px; border-radius:4px; background:color-mix(in srgb, var(--accent) 50%, transparent); color:inherit; font-weight:500; }
.mention-item { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; padding:6px 8px; border:0; border-radius:var(--r-sm); text-align:left; }
.mention-item.on { background:var(--soft); }
.mention-item .pic { width:32px; height:32px; font-size:.95rem; }
.mention-meta { display:grid; min-width:0; overflow-wrap:anywhere; }

/* Chat (js/chat.js) */
#tab-chat [data-cv="convo"] { display:flex; flex-direction:column; flex:1; min-height:0; }
#chat-who { display:flex; align-items:center; gap:10px; flex:1; min-width:0; padding:0; border:0; text-align:left; }
#chat-who > span:last-child { display:grid; min-width:0; }
#chat-menu { margin-left:auto; }
#chat-find-row input { flex:1; }
#chat-text { flex:1; min-height:48px; max-height:120px; border:0; background:none; }
#chat-down { position:fixed; right:var(--side); bottom:calc(var(--cbar, 72px) + 12px); z-index:3; width:44px; height:44px; padding:0; border-radius:50%; background:var(--surface); }
#chat-who .pic, .msg .pic { width:36px; height:36px; font-size:.95rem; }
.chat-item .pic { width:48px; height:48px; font-size:1.1rem; }
.info-top { display:flex; align-items:center; gap:12px; }
.info-top .pic { width:64px; height:64px; }

.chat-item { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; width:100%; padding:12px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; color:inherit; text-decoration:none; text-align:left; }
.chat-top, .chat-bottom { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.chat-top strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-top .post-sub { flex:none; }
.chat-prev { flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; color:var(--mute); font-size:.9rem; }
.chat-item.unread .chat-prev { color:var(--fg); font-weight:600; }
.pill { min-width:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:600; text-align:center; }
.user.pick { width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; text-align:left; }
.user.pick.on { box-shadow:inset 3px 0 var(--accent); }

.day { margin:8px 0; color:var(--mute); font-size:.8rem; text-align:center; }
.msg { display:flex; align-items:flex-end; gap:8px; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; transition:transform .12s; }
.msg.mine { justify-content:flex-end; }
.msg.sys { justify-content:center; color:var(--mute); font-size:.8rem; text-align:center; }
.msg.sel { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.msg .fig { flex:none; }
.bubble { max-width:min(78%,420px); padding:8px 12px; border-radius:16px 16px 16px 4px; background:var(--line); overflow-wrap:anywhere; }
.mine .bubble { border-radius:16px 16px 4px 16px; background:var(--me); color:var(--on-accent); }
.mine .mention { background:rgba(23,23,27,.14); color:var(--on-accent); }
.msg-body { white-space:pre-wrap; }
.msg-meta { display:block; margin-top:2px; font-size:.7rem; text-align:right; opacity:.7; }
.gone { font-style:italic; opacity:.7; }
.quote { display:grid; margin-bottom:4px; padding:4px 8px; border-left:3px solid currentColor; border-radius:4px; background:var(--soft); font-size:.85rem; cursor:pointer; }
.quote span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.8; }
.rx { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.rx button { padding:1px 8px; background:var(--bg); color:var(--fg); font-size:.8rem; }
.rx button.on { border-color:var(--fg); }

#chat-sheet { margin:auto auto 0; width:min(480px,100vw); padding:8px 8px calc(8px + env(safe-area-inset-bottom)); border-radius:16px 16px 0 0; }
#chat-sheet[open] { display:grid; gap:2px; }
#chat-sheet strong { padding:8px 12px; }
.sheet-item { width:100%; border:0; text-align:left; }
.danger { color:var(--danger); }
.rx-row { display:flex; justify-content:space-around; padding:8px 0; }
.rx-row button { padding:6px 8px; border:0; font-size:1.6rem; }
.rx-row button.on { background:color-mix(in srgb, var(--accent) 25%, transparent); }

.avwrap, #chat-av { position: relative; display: inline-flex; flex: none; }
.dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--online); border: 2px solid var(--bg); box-sizing: content-box; }

.chat-prev.typing { color: var(--online); }

.ticks { margin-left: 4px; opacity: .7; }
.ticks.read { color: var(--read); opacity: 1; }

.prize img { height:48px; }

/* "Chatea con tus amigos...": only shown on wide screens when no chat is open (see the chat panes in the @media block) */
#chat-empty { display:none; }

/* Chat conversation = its own screen: the PAGE never scrolls, only the message list does (native scrollbar at the window edge, content centered).
   680px = width of the centered chat column on phones / small tablets. */
html:has(#tab-chat[data-v="convo"]:not([hidden])) { overflow: hidden; }
#tab-chat[data-v="convo"] { --side: max(16px, calc((100% - 680px) / 2 + 16px)); display: flex; flex-direction: column; position: fixed; inset: 0; width: auto; max-width: none; min-height: 0; margin: 0; padding: 0; gap: 0; overflow: hidden; }
#tab-chat[data-v="convo"] .topbar { position: static; flex: none; margin: 0; padding-left: var(--side); padding-right: var(--side); }
#chat-msgs { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--side) calc(var(--cbar, 72px) + 8px); scrollbar-gutter: stable both-edges; }
#chat-fres { flex: 1; min-height: 0; overflow-y: auto; padding: 8px var(--side); }
#chat-fres:empty { display: none; }
#chat-find-row { padding: 8px var(--side) 0; }

/* Message box = a floating pill: only the pill is colored, the rest of the bottom is transparent (content shows through, e.g. behind Safari's glass bars) */
#tab-chat[data-v="convo"] [data-cv="convo"] { position: relative; }
#tab-chat[data-v="convo"] .composer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; flex: none; margin: 0; padding-left: var(--side); padding-right: var(--side); padding-top: 0; background: none; border-top: 0; pointer-events: none; }
#tab-chat[data-v="convo"] .composer > * { pointer-events: auto; }
#tab-chat[data-v="convo"] .composer-row, #tab-chat[data-v="convo"] .reply-to { padding: 6px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); background: color-mix(in srgb, var(--fg) 8%, var(--bg)); }
#tab-chat[data-v="convo"] .reply-to { padding: 6px 14px; border-radius: 16px; }
#tab-chat[data-v="convo"] .composer-row:focus-within { border-color: var(--fg); }
#chat-send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin: 0 4px 4px 0; padding: 0; border: 0; border-radius: 50%; background: var(--me); color: var(--on-accent); }
#chat-send svg { width: 20px; height: 20px; }

/* Native modern scrollbar for the chat's scrolling boxes (not a custom one): thin, no arrow buttons, follows light/dark mode */
#chat-msgs, #chat-fres { scrollbar-width: thin; color-scheme: light dark; }

/* Profile: nearest tournament button + floating #rank (top RIGHT so it never touches the "← Volver" button; use left:16px; right:auto to move it) */
.hero > .rank-float { position:absolute; top:12px; right:16px; margin:0; }
.tour-btn { justify-self:start; padding:6px 14px; text-align:left; }
.tour-list { display:grid; gap:8px; }
.tour-item { display:grid; gap:2px; padding-bottom:8px; border-bottom:1px solid var(--line); }

/* Posiciones for teams */
.player .sub { display:block; font-size:.8rem; color:var(--mute); overflow-wrap:anywhere; }
.player.out { opacity:.55; }

/* Team screen */
.code { padding:12px; border:1px dashed var(--line); border-radius:var(--r-md); font:700 2.2rem/1.1 monospace; letter-spacing:.2em; text-align:center; user-select:all; }
.member { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.warn { color:var(--danger); font-weight:600; }

/* Reglas de puntaje (event screen): points / action, no grid lines */
.pts { display:grid; grid-template-columns:max-content 1fr; gap:6px 24px; }
.pts .neg { color:var(--danger); }

/* Collapsible titles (Eventos) and the "text ▾" that opens the native list (pickList in tournaments.js) */
.fold { cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
label.pick { position:relative; justify-self:start; display:inline-block; font-weight:600; cursor:pointer; }
label.pick select { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; opacity:0; cursor:pointer; }

/* Icon-only button (back arrow, ✕, password eye) */
.icon-btn { display:grid; place-items:center; flex:none; width:40px; height:40px; padding:0; border:0; border-radius:var(--r-pill); font-size:1.1rem; }
.icon-btn:hover { border:0; background:var(--soft); }
/* Text-style button (links inside a sentence: "Forgot password?", "Resend code", "Sign in ›") */
.link-btn { padding:4px 0; border:0; border-radius:0; background:none; color:var(--fg); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.link-btn:hover { border:0; text-decoration:underline; }

/* AUTH + SIGN UP: one question per screen. Phones: full screen, main button at the bottom. 600px and wider: a centered card. */
.screen { --pad:20px; display:flex; min-height:100dvh; text-align:left; }
.auth-card { flex:1; display:flex; flex-direction:column; gap:16px; min-width:0; padding:calc(16px + env(safe-area-inset-top)) var(--pad) calc(16px + env(safe-area-inset-bottom)); }
.auth-brand { display:none; }
.step { display:flex; flex-direction:column; gap:16px; flex:1; }
.step fieldset { display:grid; gap:16px; margin:0; padding:0; border:0; min-width:0; }
.step-top { display:flex; align-items:center; justify-content:space-between; min-height:40px; }
.step-top .icon-btn { margin-left:-8px; }
.step-top .link-btn { margin-left:auto; }
.step h1 { font-size:1.9rem; line-height:1.15; font-weight:700; }
.hint { color:var(--mute); font-size:.95rem; }
.step .field input { padding:8px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; font-size:1.4rem; }
.step .field input:focus { border-color:var(--fg); }
.step .field input.code-in { padding:16px 16px 16px calc(16px + .5em); border:0; border-radius:var(--r-md); background:var(--soft); font:700 2rem/1 monospace; letter-spacing:.5em; text-align:center; }
.pw { display:flex; align-items:center; gap:4px; }
.pw input { flex:1; min-width:0; }
.field:has(> input[hidden]), p:has(> [data-resend][hidden]) { display:none; }
.step-foot { display:grid; gap:12px; margin-top:auto; padding-top:16px; }
.step .primary { padding:16px; font-size:1.05rem; }
form[data-auth]:invalid .primary, #signup:has([data-step]:not([hidden]) :invalid) #su-next { border-color:transparent; background:var(--soft); color:var(--mute); } /* grey until the step is filled in */
.fine { color:var(--mute); font-size:.8rem; }
.fine a { color:var(--fg); text-decoration:underline; cursor:pointer; }
.switch { margin:0 calc(-1 * var(--pad)) calc(-16px - env(safe-area-inset-bottom)); padding:16px var(--pad) calc(16px + env(safe-area-inset-bottom)); background:var(--soft); color:var(--mute); text-align:center; }
.auth-hero { display:grid; justify-items:center; gap:12px; padding:16px 0 8px; text-align:center; }
.logo { width:56px; height:56px; border-radius:var(--r-md); }
.social { display:grid; gap:10px; }
.social button { display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; }
.social svg { width:20px; height:20px; }
.or { display:flex; align-items:center; gap:12px; color:var(--mute); font-size:.9rem; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-msg { padding:12px 14px; border-radius:var(--r-sm); background:var(--soft); font-size:.9rem; }
.auth-msg:empty { display:none; }
/* 600px+: a centered card. 900px+: the app icon on the left, the card on the right. The screen is exactly as tall as the window (no extra margins), it only scrolls if the content really does not fit. */
@media (min-width:600px) {
  .screen { --pad:32px; align-items:center; justify-content:center; padding:24px; }
  .auth-card { flex:none; width:min(460px,100%); padding:var(--pad); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
  .switch { margin-bottom:calc(-1 * var(--pad)); padding-bottom:16px; border-radius:0 0 var(--r-md) var(--r-md); }
}
@media (min-width:900px) {
  .screen { gap:80px; }
  .auth-brand { display:grid; flex:0 1 360px; justify-items:start; gap:24px; }
  .auth-brand .logo { width:128px; height:128px; border-radius:var(--r-md); }
  .auth-brand strong { font-size:3rem; line-height:1; font-weight:700; }
}

/* Dialogs with a header (✕ / title / main action): full screen on phones, a centered window on wide screens */
dialog.modal { padding:0; overflow-y:auto; }
dialog.modal form { display:block; }
.dlg-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:12px; padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top)); background:var(--surface); border-bottom:1px solid var(--line); }
.dlg-head strong { flex:1; font-size:1.1rem; }
.dlg-head .icon-btn { margin-left:-8px; }
.dlg-head .primary { padding:8px 18px; }
.dlg-body { position:relative; display:grid; gap:16px; padding:16px; }
@media (max-width:767.98px) { dialog.modal { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; } }
@media (min-width:768px) { dialog.modal { width:min(600px,92vw); max-height:90dvh; } }

/* WIDE SCREENS (768px+; the width decides, never the device): LEFT BAR (icons, or icons + labels when expanded) | MAIN COLUMN.
   Change 768px here (and in app.js) to move the switch point. */
@media (min-width:768px) {
  :root { --railw:88px; --mainw:600px; --sidew:0px; }
  body[data-rail] { --railw:275px; }
  body[data-two] { --mainw:950px; } /* main 600 + right column 350 = 950: every page has the same total width, so the left bar never moves */
  #app { display:grid; grid-template-columns:var(--railw) minmax(0,var(--mainw)) var(--sidew); justify-content:start; }
  :where(#app) > .tab { grid-column:2; grid-row:1; max-width:none; margin:0; padding:20px 16px 32px; min-height:100dvh; align-content:start; }

  /* Left bar */
  nav { position:sticky; inset:auto; top:0; z-index:3; grid-column:1; grid-row:1; align-self:start; flex-direction:column; align-items:center; gap:4px; height:100dvh; padding:8px 12px; overflow-y:auto; border:0; background:none; }
  body[data-rail] nav { align-items:flex-start; }
  nav a { flex:none; display:flex; align-items:center; gap:16px; padding:12px 16px; border-radius:var(--r-btn); font-size:1.05rem; }
  nav a:hover, #rail-toggle:hover { background:var(--soft); }
  nav a[aria-current] { box-shadow:none; background:var(--soft); font-weight:700; }
  nav .me, nav a[href="/home/buscar"], nav a[href="/home/notificaciones"] { order:0; }
  body[data-rail] .label { display:inline; }
  body[data-unread] nav a[href="/home/notificaciones"]::after, body[data-chat] nav a[href="/chat"]::after { top:10px; left:34px; }

  /* Publicar (circle when collapsed, wide pill when expanded) and the expand / collapse arrow */
  #rail-post { display:grid; place-items:center; width:52px; height:52px; margin-top:12px; padding:0; }
  body[data-rail] #rail-post { align-self:stretch; width:auto; height:auto; padding:14px; font-size:1.05rem; }
  body[data-rail] #rail-post svg { display:none; }
  #rail-toggle { display:grid; margin-top:auto; padding:12px 16px; border:0; color:var(--mute); }
  body[data-rail] #rail-toggle svg { transform:rotate(180deg); }

  /* Profile at the bottom: photo (+ name, @username and ⋯ menu when expanded) */
  .rail-foot { display:flex; align-items:center; gap:4px; }
  body[data-rail] .rail-foot { align-self:stretch; }
  nav .me { flex:1; min-width:0; padding:8px; }
  nav .me svg { display:none; }
  .who { display:flex; align-items:center; gap:12px; min-width:0; }
  .who-text { display:none; min-width:0; text-align:left; }
  body[data-rail] .who-text { display:grid; }
  .who-text strong, .who-text small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rail-more { display:none; }
  body[data-rail] .rail-more { display:block; }
  .rail-only { display:revert; }

  /* Notificaciones = floating panel next to the left bar, over whatever page you are on (it is not a screen: no history entry).
     Click outside, the bell again or Esc closes it (notifications.js). Panel size: width / max-height here.
     The ::before is an invisible layer that catches the "click outside". z-index 8 = above everything on the page, below dialogs and toasts. */
  #notif { --px:var(--railw); position:fixed; z-index:8; top:8px; left:calc(var(--px) + 8px); width:400px; max-width:calc(100vw - var(--px) - 16px); max-height:calc(100dvh - 16px); margin:0; overflow-y:auto; overscroll-behavior:contain; padding:16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow); }
  #notif::before { content:""; position:fixed; inset:0 0 0 var(--px); z-index:-1; }

  /* Cards in a grid */
  #ev-now, #ev-next, #ev-past { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
  .hof { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
  .hof-item.big, .hof-more, .hof-empty { grid-column:1 / -1; }
  .hof-item:not(.big) + .hof-item { border-top:0; }

  /* Profile photo becomes a contained banner (not full width) */
  .hero { margin:0; padding:12px 0 4px; }
  .hero.has-pic { padding:20px 16px 4px; border-radius:var(--r-md); overflow:hidden; max-height:260px; }

  /* CHAT, two panes: chat list at the left, the open chat (or "new" / "info") at the right. The page itself never scrolls here.
     Left pane width = the first number in grid-template-columns. */
  html:has(#tab-chat[data-v]:not([hidden])) { overflow:hidden; }
  #tab-chat[data-v] { --side:16px; background:var(--surface); border-inline:1px solid var(--line); position:relative; inset:auto; width:auto; max-width:none; height:100dvh; min-height:0; margin:0; padding:0; gap:0; overflow:hidden; display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  #tab-chat > [data-cv] { grid-column:2; grid-row:1; min-width:0; min-height:0; max-width:none; justify-self:stretch; align-content:start; padding:16px; overflow-y:auto; }
  #tab-chat > [data-cv="list"] { grid-column:1; border-right:1px solid var(--line); }
  #tab-chat > [data-cv="convo"] { padding:0; overflow:hidden; }
  #tab-chat > .stack[data-cv]:not([data-cv="list"]) { padding-top:0; }
  #tab-chat > .stack[data-cv] .topbar { top:0; margin:0 -16px; }
  #tab-chat [data-cv="convo"] .topbar > [data-back] { display:none; }
  #chat-down { position:absolute; right:16px; }
  #tab-chat[data-v="list"] #chat-empty { display:grid; grid-column:2; grid-row:1; place-items:center; padding:16px; text-align:center; }
  .chat-item[aria-current] { box-shadow:inset 3px 0 var(--accent); padding-left:12px; }
}

/* 1100px+: right column (search + links). Pages with two panes have no right column. */
@media (min-width:1100px) {
  :root { --sidew:350px; }
  #app { justify-content:center; } /* the whole layout (same total width on every page) is centered; below 1100px it starts at the left edge */
  #notif { --px:calc(max(0px, (100% - var(--railw) - var(--mainw) - var(--sidew)) / 2) + var(--railw)); }
  body[data-two] { --sidew:0px; }
  body:not([data-two]) #side { display:grid; align-content:start; gap:16px; grid-column:3; grid-row:1; position:sticky; top:0; align-self:start; height:100dvh; overflow-y:auto; padding:12px 16px; }
  nav a[href="/home/buscar"] { display:none; }
  .legal { display:grid; gap:4px; color:var(--mute); font-size:.8rem; }
  .legal a { cursor:pointer; text-decoration:underline; }
}

/* Very wide (1000px+): profile card on the left, posts on the right */
@media (min-width:1000px) {
  #tab-me, #tab-profile { grid-template-columns:minmax(0,360px) minmax(0,1fr); column-gap:32px; align-items:start; }
  #tab-me { grid-template-rows:repeat(4,auto) 1fr; }
  #tab-me > :not(#me-wall), #prof-head { grid-column:1; }
  #me-wall { grid-column:2; grid-row:1 / span 5; }
  #prof-wall { grid-column:2; grid-row:1; }
}