:root{--ink:#f8fafc;--dark:#07111f;--card:rgba(7,17,31,.76);--muted:#cbd5e1;--green:#74ce13;--yellow:#f0c900;--blue:#37b7f2;--orange:#ff8752;--red:#cc3d00;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box} html,body{min-height:100%} body{margin:0;background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.62)),url(images/bg.jpg) center top/cover fixed no-repeat;font-family:Calibri,Arial,sans-serif;font-size:15px;color:var(--ink)}
a{color:inherit}.page-shell{min-height:100vh;padding:24px 18px 60px}.header{margin:0 auto;width:min(800px,90vw);height:260px;background:url(images/logo.png) center center/contain no-repeat;filter:drop-shadow(0 18px 38px rgba(0,0,0,.55))}.header h1{margin:0;height:100%;overflow:hidden}.header h1 a{display:block;height:100%;padding-top:300px;overflow:hidden}.welcome{text-align:center;margin:10px auto 28px;padding:12px 22px;max-width:780px;border:1px solid var(--line);border-radius:999px;background:rgba(7,17,31,.55);backdrop-filter:blur(8px);font-size:1.5rem;font-weight:300;text-shadow:0 2px 12px #000}.welcome b{color:var(--yellow);font-weight:700}.menu{max-width:1100px;margin:0 auto}.menu ul{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.menu li{display:block}.menu li a{display:grid;place-items:center;width:170px;height:170px;padding:18px;border-radius:999px;background:var(--green);color:#07111f;text-align:center;text-decoration:none;text-transform:uppercase;font-size:1.45rem;font-weight:700;letter-spacing:.02em;box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 -12px 30px rgba(0,0,0,.1);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.menu li a:hover,.menu li a.active{transform:translateY(-8px) scale(1.03);filter:saturate(1.12);box-shadow:0 28px 55px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.12)}.m2{background:var(--yellow)!important}.m3{background:var(--blue)!important}.m4{background:var(--orange)!important}.m5{background:var(--red)!important;color:#fff!important}.subpage{margin:6px auto 24px}.subpage li a{width:auto;min-width:145px;height:auto;border-radius:18px;padding:14px 18px;font-size:1rem}.card{max-width:1160px;margin:18px auto;padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:0 24px 60px rgba(0,0,0,.35);backdrop-filter:blur(10px)}.card.narrow{max-width:720px;text-align:center}.page-title{margin:0 0 10px;text-align:center;font-size:2rem}.hint{color:var(--muted);text-align:center;margin:0 0 24px}.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line)}table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.96);color:#0f172a}th{background:#101f32;color:#fff;text-transform:uppercase;font-size:.82rem;letter-spacing:.04em}th,td{padding:12px 10px;border-bottom:1px solid #dbe3ef;text-align:center}tr:nth-child(even) td{background:#f8fafc}.group-row td,.date-row td{background:#13233a!important;color:#fff;font-weight:800;font-size:1.1rem}.qualified td:first-child,.qualified td:nth-child(2){background:#dcfce7!important;font-weight:800}.team{text-align:left;font-weight:700}.score-input{width:54px;padding:9px;border:1px solid #94a3b8;border-radius:12px;text-align:center;font-size:1rem}.sub,.btn{display:inline-block;border:0;border-radius:999px;padding:10px 18px;background:var(--green);color:#07111f;font-weight:800;cursor:pointer;text-decoration:none;transition:transform .15s ease,filter .15s ease}.sub:hover,.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.badge{display:inline-block;border-radius:999px;padding:6px 10px;font-weight:800}.badge-ok{background:#dcfce7;color:#166534}.badge-warn{background:#fee2e2;color:#991b1b}.badge-muted{background:#e2e8f0;color:#334155}#timer{position:absolute;right:8vw;top:48px;text-align:right;color:white;text-shadow:0 2px 10px #000;font-size:16px}.hour{font-size:2em}.clock{display:block}.notice{padding:16px 18px;border-radius:16px;margin:14px 0;text-align:center;font-weight:700}.notice.ok{background:#dcfce7;color:#166534}.notice.bad{background:#fee2e2;color:#991b1b}@media(max-width:720px){.header{height:180px}.welcome{font-size:1.05rem}.menu li a{width:136px;height:136px;font-size:1.08rem}.subpage li a{min-width:0;width:auto}.page-shell{padding:14px 10px 40px}th,td{padding:9px 7px}}
.card.wide{max-width:calc(100vw - 48px)}
td.hit{background:#bbf7d0!important;font-weight:800;color:#166534}
td.mine{background:#fef08a!important;font-weight:800;color:#713f12}
td.muted{color:#94a3b8}

/* Mobile refinements - iPhone SE / small screens */
.auth-form input,
.auth-form select,
.auth-form textarea {
  width: 100%;
  max-width: 360px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #94a3b8;
  border-radius: 12px;
  font-size: 16px; /* prevents iOS zoom on focus */
}

@media (max-width: 480px) {
  body {
    background-attachment: scroll;
    font-size: 14px;
  }

  .page-shell {
    padding: 10px 8px 32px;
  }

  #timer {
    position: static;
    margin: 4px auto 0;
    text-align: center;
    font-size: 13px;
  }

  .hour {
    font-size: 1.35em;
  }

  .header {
    width: min(320px, 92vw);
    height: 116px;
    margin-top: 4px;
  }

  .welcome {
    margin: 8px auto 14px;
    padding: 10px 12px;
    border-radius: 18px;
    font-size: .95rem;
    line-height: 1.35;
  }

  .welcome a {
    display: inline-block;
    margin-top: 8px;
    margin-left: 0 !important;
  }

  .menu ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .menu li a {
    width: 100%;
    height: 92px;
    min-width: 0;
    border-radius: 20px;
    padding: 10px 8px;
    font-size: .9rem;
    line-height: 1.15;
  }

  .main-menu li:first-child:last-child,
  .menu li:nth-last-child(1):nth-child(odd) {
    grid-column: 1 / -1;
  }

  .subpage li a {
    height: auto;
    min-height: 48px;
    border-radius: 14px;
  }

  .card,
  .card.wide,
  .card.narrow {
    max-width: none;
    width: 100%;
    margin: 12px auto;
    padding: 14px 10px;
    border-radius: 18px;
  }

  .page-title {
    font-size: 1.35rem;
  }

  .hint {
    margin-bottom: 14px;
    font-size: .95rem;
    line-height: 1.35;
  }

  .table-wrap {
    border-radius: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 620px;
  }

  .pontok {
    min-width: 520px;
  }

  .tipplista {
    min-width: 760px;
  }

  th,
  td {
    padding: 8px 6px;
    font-size: .88rem;
  }

  .score-input {
    width: 48px;
    min-height: 44px;
    padding: 8px 6px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  .sub,
  .btn {
    min-height: 44px;
    padding: 10px 14px;
    white-space: normal;
  }
}

/* Better mobile table affordance */
@media (max-width: 480px) {
  .table-wrap {
    position: relative;
    margin-top: 8px;
    box-shadow: inset -18px 0 18px -18px rgba(15,23,42,.75);
  }

  .table-wrap::before {
    content: '← húzd oldalra a táblázatot →';
    display: block;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 3;
    padding: 7px 10px;
    background: #fef3c7;
    color: #713f12;
    font-weight: 800;
    font-size: .82rem;
    text-align: center;
    border-bottom: 1px solid #f59e0b;
  }

  .table-wrap::-webkit-scrollbar {
    height: 10px;
  }

  .table-wrap::-webkit-scrollbar-track {
    background: rgba(255,255,255,.25);
    border-radius: 999px;
  }

  .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.75);
    border-radius: 999px;
  }

  table {
    width: max-content;
    min-width: 100%;
  }

  .pontok,
  .tipplista {
    width: max-content;
  }

  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 8px 0 12px -12px rgba(15,23,42,.85);
  }

  th:first-child {
    z-index: 4;
  }

  td:first-child {
    background: #fff;
  }

  tr:nth-child(even) td:first-child {
    background: #f8fafc;
  }

  .group-row td:first-child,
  .date-row td:first-child {
    background: #13233a !important;
  }
}

/* Robust sticky first column for tables that contain per-row forms.
   Some mobile browsers treat <form> as an extra child inside <tr>, so
   td:first-child will not always match. first-of-type catches those rows too. */
@media (max-width: 480px) {
  .table-wrap table th:first-of-type,
  .table-wrap table td:first-of-type {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 8px 0 12px -12px rgba(15,23,42,.85);
  }

  .table-wrap table th:first-of-type {
    z-index: 4;
    background: #101f32;
  }

  .table-wrap table td:first-of-type {
    background: #fff;
  }

  .table-wrap table tr:nth-child(even) td:first-of-type {
    background: #f8fafc;
  }

  .table-wrap table .group-row td:first-of-type,
  .table-wrap table .date-row td:first-of-type {
    background: #13233a !important;
  }
}