/* App-like responsive UI improvements */
:root{
    --bg:#f3f4f6;
    --panel:#ffffff;
    --muted:#6b7280;
    --accent1:#6366f1;
    --accent2:#06b6d4;
    --success:#22c55e;
    --glass: rgba(255,255,255,0.6);

    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --radius:14px;
    --shadow-lg: 0 10px 30px rgba(2,6,23,0.08);
}

/* Reset / base */
*{margin:0;padding:0;box-sizing:border-box;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
html,body{height:100%}
body{
    background:linear-gradient(180deg, #f8fafc, var(--bg));
    color:#0f172a;
    -webkit-font-smoothing:antialiased;
    padding-top: calc(var(--safe-top) + 8px);
    padding-bottom: calc(var(--safe-bottom) + 12px);
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* CONTAINER - full width with app padding */
.container{
    width:100%;
    max-width:980px;
    margin:12px auto;
    padding:0 16px;
}

/* HEADER - sticky, elevated app bar */
.header{
    position:relative; /* not sticky / stays in normal flow */
    top:auto;
    z-index:40;
    background:#000000; /* black background */
    color:#ffffff; /* white text for visibility */
    padding:18px 16px;
    display:flex;
    justify-content:center; /* center the logo */
    gap:12px;
    align-items:center;
    border-radius:calc(var(--radius) - 4px);
    margin:0 auto 12px;
    box-shadow: var(--shadow-lg);
    max-width:980px;
    width:calc(100% - 32px);
}
.header .logo{
    width:auto;
    height:auto;
    max-width:220px;   /* larger on desktop */
    max-height:120px;
    display:block;
    margin:0 auto;
    border-radius:12px;
    object-fit:contain; /* show full logo without cropping */
    box-shadow:0 8px 18px rgba(2,6,23,0.06);
}
.header .title{display:none;} /* keep title hidden */
/* ...existing code... */
.header .title{font-weight:800;font-size:18px;letter-spacing:.2px;flex:1}
.header .title small{display:block;font-weight:500;font-size:12px;color:rgba(255,255,255,0.85);margin-top:2px}

/* HELPLINE - prominent tappable element */
.helpline{
    width:calc(100% - 32px);
    margin:8px auto;
    background:linear-gradient(90deg,#16a34a,#22c55e);
    color:#fff;
    padding:10px 14px;
    border-radius:12px;
    text-align:center;
    font-weight:700;
    box-shadow:0 8px 20px rgba(34,197,94,0.12);
    max-width:980px;
}
.helpline a{color:inherit;text-decoration:none;display:inline-block;padding:6px 10px;border-radius:8px}

/* RESULT CARD */
.result-box{
    width:100%;
    max-width:980px;
    margin:8px auto;
    background:linear-gradient(180deg, rgba(239, 230, 230, 0.95), var(--panel));
    border-radius:var(--radius);
    padding:12px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(6px);
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* row = card item */
.row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px;
    border-radius:12px;
    transition:transform .12s ease, box-shadow .12s ease;
    background:linear-gradient(90deg, rgba(99,102,241,0.03), rgba(6,182,212,0.01));
    border:1px solid rgba(2,6,23,0.04);
    cursor:default;
    user-select:none;
}
.row + .row{margin-top:8px}
.row:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(2,6,23,0.08)}

/* left area: date / game info */
.row .left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:1;
}
.date-badge{
    width:62px;
    height:62px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--accent1),#7c3aed);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    font-weight:800;
    font-size:13px;
    box-shadow:0 8px 22px rgba(99,102,241,0.18);
    flex-shrink:0;
}
.info{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.game{
    font-weight:800;
    color:#081124;
    font-size:16px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.time{
    margin-top:6px;
    color:var(--muted);
    font-size:13px;
}

/* right area: result / badges */
.right{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

/* big numeric result pill */
.result{
    background:linear-gradient(135deg,var(--success),#10b981);
    color:#fff;
    padding:10px 18px;
    border-radius:999px;
    font-weight:800;
    font-size:20px;
    box-shadow:0 10px 24px rgba(16,185,129,0.16);
    min-width:84px;
    text-align:center;
}

/* small secondary badge / link */
.record{
    font-size:13px;
    color:var(--accent1);
    text-decoration:none;
    font-weight:700;
}

/* highlight for special rows */
.row.highlight{
    background:linear-gradient(90deg, rgba(255,244,179,0.45), rgba(249,115,22,0.04));
    border-color: rgba(249,115,22,0.12);
}

/* chart button - desktop / tablet */
.chart-btn{
    display:inline-block;
    text-align:center;
    background:linear-gradient(135deg,var(--accent1),var(--accent2));
    color:#fff;
    padding:12px 18px;
    margin:14px 0;
    border-radius:12px;
    text-decoration:none;
    font-weight:800;
    box-shadow:0 12px 30px rgba(99,102,241,0.12);
}

/* floating action button for mobile */
.fab{
    display:none;
    position:fixed;
    right:18px;
    bottom: calc(18px + var(--safe-bottom));
    z-index:60;
    width:64px;
    height:64px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent1),var(--accent2));
    color:#fff;
    box-shadow:0 12px 30px rgba(99,102,241,0.16);
    align-items:center;
    justify-content:center;
    font-size:22px;
    text-decoration:none;
}

/* disclaimer & footer */
.disclaimer{
    width:100%;
    max-width:980px;
    margin:12px auto 8px;
    background:#0f172a;
    color:#d1d5db;
    padding:14px;
    border-radius:12px;
    font-size:13px;
    line-height:1.45;
}
.footer{
    text-align:center;
    padding:14px;
    font-size:12px;
    color:var(--muted);
    width:100%;
    margin:8px auto 32px;
}

/* Accessibility / focus */
a:focus, button:focus, .row:focus{outline:3px solid rgba(99,102,241,0.18);outline-offset:2px;border-radius:10px}

/* Responsive adjustments */
@media (max-width:900px){
    .header{padding:12px 14px}
    .date-badge{width:56px;height:56px}
    .result{min-width:72px;padding:8px 14px;font-size:18px}
    .chart-btn{padding:10px 14px}
}

@media (max-width:600px){
    /* App-like stacked rows */
    .container{padding:0 14px}
    .result-box{padding:10px;gap:10px}
    .row{
        flex-direction:row;
        align-items:center;
        padding:12px;
        gap:10px;
    }
    .left{gap:10px}
    .date-badge{width:52px;height:52px;font-size:12px}
    .game{font-size:15px}
    .time{font-size:12px}
    .right{gap:8px}
    .chart-btn{display:none}
    .fab{display:flex}
    .helpline{font-size:14px;padding:10px}
    .footer{padding:12px}
}

@media (max-width:420px){
    /* make the rows look like cards in a feed */
    .row{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        padding:12px;
    }
    .left{width:100%;display:flex;justify-content:space-between;align-items:center}
    .date-badge{width:48px;height:48px}
    .game{font-size:15px}
    .time{font-size:12px}
    .right{width:100%;display:flex;justify-content:space-between;gap:10px}
    .result{min-width:64px;padding:8px 12px;font-size:18px}
}

/* reduce motion preference */
@media (prefers-reduced-motion: reduce){
    .row, .header, .result-box{transition:none}
}

/* Responsive tweaks for logo size */
@media (max-width:900px){
    .header .logo{max-width:180px;max-height:100px}
}
@media (max-width:600px){
    .header .logo{max-width:160px;max-height:90px}
}
@media (max-width:420px){
    .header .logo{max-width:140px;max-height:80px}
}