:root {
    --bg:#0E0D0C; --bg-alt:#161514; --card:#1B1918; --ink:#F5F3EF; --ink-dim:#928D86;
    --ember:#C8202C; --silver:#E2E0DB; --line:#2A2826; --win:#4FBF6E; --loss:#E14B4B;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--ink); font-family:'Manrope',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  .display { font-family:'Big Shoulders Display','Arial Narrow',sans-serif; font-weight:800; line-height:.86; letter-spacing:.01em; }
  .wrap { max-width:900px; margin:0 auto; padding:0 16px; }
  a { color:inherit; }

  header { position:relative; padding:36px 0 22px; border-bottom:1px solid var(--line); overflow:hidden; }
  header::before { content:''; position:absolute; top:-40%; right:-14%; width:55%; height:170%; background:radial-gradient(circle at 60% 40%, rgba(200,32,44,.16), transparent 65%); pointer-events:none; }
  .back { display:inline-block; font-size:.85rem; color:var(--ink-dim); text-decoration:none; margin-bottom:16px; }
  .back:hover { color:var(--ink); }
  h1 { font-size:clamp(2.4rem,9vw,4.4rem); margin:0; }
  h1 span { color:var(--ember); }
  .sub { color:var(--ink-dim); margin:12px 0 0; max-width:54ch; line-height:1.5; font-size:.98rem; }

  .filters { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
  .chip { display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line); color:var(--ink-dim); padding:7px 13px; border-radius:100px; font-size:.84rem; font-weight:600; cursor:pointer; user-select:none; }
  .chip.active { background:var(--ember); border-color:var(--ember); color:#fff; }
  .chip:not(.active):hover { border-color:var(--silver); color:var(--ink); }

  .summary { margin:22px 0 6px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--ember); border-radius:3px; padding:16px 20px; }
  .stats { display:flex; gap:28px; flex-wrap:wrap; }
  .stat .n { font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:2.2rem; line-height:1; }
  .stat.free .n { color:var(--win); }
  .stat .l { font-size:.74rem; color:var(--ink-dim); margin-top:3px; }
  .free-title { font-size:.8rem; color:var(--ink-dim); margin:16px 0 8px; }
  .free-list { display:flex; flex-wrap:wrap; gap:6px; }
  .free-list span { font-size:.8rem; font-weight:600; color:var(--win); border:1px solid rgba(79,191,110,.4); background:rgba(79,191,110,.08); padding:4px 10px; border-radius:100px; }
  .legend { display:flex; gap:16px; flex-wrap:wrap; font-size:.76rem; color:var(--ink-dim); margin:14px 0 0; }
  .legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }

  .month { margin-top:30px; }
  .month h2 { font-size:1.5rem; margin:0 0 10px; color:var(--silver); text-transform:capitalize; }
  .grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
  .dow { font-size:.68rem; color:var(--ink-dim); text-align:center; padding:4px 0; text-transform:lowercase; }
  .dow.we { color:var(--silver); font-weight:700; }
  .cell { min-height:68px; background:var(--bg-alt); border:1px solid var(--line); border-radius:4px; padding:4px; display:flex; flex-direction:column; gap:3px; font:inherit; color:inherit; text-align:left; }
  .cell.blank { background:none; border-color:transparent; }
  .cell .num { font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:1rem; line-height:1; color:var(--ink-dim); }
  .cell.we { background:#1c1a19; }
  .cell.has { border-color:var(--ember); background:rgba(200,32,44,.1); cursor:pointer; }
  .cell.has .num { color:var(--ink); }
  .cell.has:hover { background:rgba(200,32,44,.2); }
  .cell.free { border-color:rgba(79,191,110,.35); background:rgba(79,191,110,.06); }
  .cell.free .lbl { font-size:.62rem; font-weight:700; color:var(--win); }
  .cell.past { opacity:.5; }
  .cell.today { box-shadow:0 0 0 2px var(--silver); }
  .tags { display:flex; flex-wrap:wrap; gap:2px; }
  .tag { font-size:.6rem; font-weight:800; padding:1px 4px; border-radius:3px; line-height:1.3; }
  .tag.blanco { background:var(--ink); color:var(--bg); }
  .tag.negro { background:var(--bg); color:var(--ink); border:1px solid var(--silver); }
  .tag.more { color:var(--ink-dim); }

  .empty { color:var(--ink-dim); padding:40px 0; line-height:1.55; }
  .empty button { background:var(--ember); color:#fff; border:0; padding:9px 18px; border-radius:100px; font:700 .86rem 'Manrope',sans-serif; cursor:pointer; margin-top:12px; }

  dialog { background:var(--card); color:var(--ink); border:1px solid var(--line); border-top:3px solid var(--ember); border-radius:6px; padding:20px; width:min(480px,92vw); max-height:80vh; overflow:auto; }
  dialog::backdrop { background:rgba(0,0,0,.65); }
  
  .m .map-link { display:inline-flex; align-items:center; gap:4px; font-size:.76rem; color:var(--silver); text-decoration:none; border:1px solid var(--line); padding:3px 8px; border-radius:100px; margin-top:6px; }
  .m .map-link:hover { border-color:var(--silver); color:var(--ink); }

  dialog h3 { font-size:1.5rem; margin:0 0 12px; text-transform:capitalize; }
  .m { padding:12px 0; border-top:1px solid var(--line); }
  .m .top { font-size:.76rem; color:var(--ink-dim); margin-bottom:5px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .m .t { font-weight:700; line-height:1.35; }
  .m .t .dr { color:var(--ember); }
  .m .t .vs { color:var(--ink-dim); font-weight:500; padding:0 6px; }
  .m .v { font-size:.82rem; color:var(--ink-dim); margin-top:4px; }
  .m .v b { color:var(--ink); }
  .close { margin-top:10px; background:var(--bg-alt); color:var(--ink); border:1px solid var(--line); padding:8px 18px; border-radius:100px; font:700 .85rem 'Manrope',sans-serif; cursor:pointer; }

  footer { margin-top:40px; padding:26px 0 calc(36px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); color:var(--ink-dim); font-size:.82rem; line-height:1.6; }

  @media (max-width:560px) {
    .wrap { padding:0 10px; }
    .cell { min-height:56px; padding:3px; }
    .tag { font-size:.54rem; padding:1px 3px; }
  }