/* ================================================================
   HGA Arcade — style.css  v3.0.0
   Hawks Clan theme: deep burgundy header, warm tan body,
   orange play buttons, dark brown text. 4-column grid.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Open+Sans:wght@400;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────────────── */
:root {
    --hga-hdr-bg:     #280a0a;      /* deep burgundy */
    --hga-hdr-bdr:    #5c1a1a;
    --hga-gold:       #e9c87a;
    --hga-gold-dim:   #b89040;
    --hga-bg:         #c09060;      /* tan page bg */
    --hga-card:       #cfa070;      /* tan card */
    --hga-card-h:     #dbb080;      /* card hover */
    --hga-card-bdr:   #a87040;
    --hga-text:       #1c0c00;
    --hga-muted:      #5a3010;
    --hga-btn:        #b84010;
    --hga-btn-h:      #d05020;
    --hga-radius:     7px;
}

/* ── Reset ─────────────────────────────────────────────────────── */
.hga-wrap,
.hga-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.hga-wrap   { font-family: 'Open Sans', sans-serif; color: var(--hga-text); background: var(--hga-bg); border-radius: 6px; overflow: hidden; }

/* ── Header ────────────────────────────────────────────────────── */
.hga-header {
    background: var(--hga-hdr-bg);
    text-align: center;
    padding: 28px 20px 22px;
    border-bottom: 3px solid var(--hga-hdr-bdr);
}
.hga-logo  { font-size: 42px; display: block; margin-bottom: 6px; }
.hga-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(22px, 4vw, 40px);
    font-weight: 900;
    color: var(--hga-gold);
    letter-spacing: .06em;
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
    margin-bottom: 6px;
}
.hga-sub { font-size: 13px; color: var(--hga-gold-dim); letter-spacing: .02em; }

/* ── Filter Bar ────────────────────────────────────────────────── */
.hga-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 13px 18px;
    background: var(--hga-hdr-bg);
    border-bottom: 2px solid var(--hga-card-bdr);
}
.hga-fbtn {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 6px 15px;
    border-radius: 20px;
    border: 1px solid rgba(233,200,122,.3);
    background: rgba(255,255,255,.08);
    color: var(--hga-gold-dim);
    cursor: pointer;
    transition: all .15s;
}
.hga-fbtn:hover   { background: rgba(255,255,255,.16); color: var(--hga-gold); border-color: rgba(233,200,122,.6); }
.hga-fbtn.is-active { background: var(--hga-btn); border-color: var(--hga-btn); color: #fff; }

/* ── Game Stage ────────────────────────────────────────────────── */
.hga-stage { background: #000; }
.hga-stage-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--hga-hdr-bg);
    padding: 10px 18px;
    border-bottom: 2px solid var(--hga-hdr-bdr);
}
.hga-stage-label {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    color: var(--hga-gold);
    letter-spacing: .04em;
}
.hga-back-btn {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 16px;
    background: var(--hga-btn);
    border: none;
    border-radius: var(--hga-radius);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.hga-back-btn:hover { background: var(--hga-btn-h); }
.hga-frame {
    display: block;
    width: 100%;
    height: 600px;
    border: none;
    background: #111;
}

/* ── 4-Column Grid ─────────────────────────────────────────────── */
.hga-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 2px solid var(--hga-card-bdr);
}

/* ── Card ──────────────────────────────────────────────────────── */
.hga-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 14px 14px;
    background: var(--hga-card);
    border-right: 1px solid var(--hga-card-bdr);
    border-bottom: 1px solid var(--hga-card-bdr);
    transition: background .15s;
}
.hga-card:nth-child(4n) { border-right: none; }
.hga-card:hover         { background: var(--hga-card-h); }

.hga-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 6px;
}
.hga-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }

/* Category badges */
.hga-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    margin-top: 4px;
    color: #f0d890;
    background: #1a0808;     /* default fallback */
}
.hga-badge--classic  { background: #6b1414; }
.hga-badge--action   { background: #145214; }
.hga-badge--puzzle   { background: #141466; }
.hga-badge--card     { background: #501450; }
.hga-badge--strategy { background: #3a3408; }

.hga-game-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hga-text);
    line-height: 1.2;
}
.hga-game-desc {
    font-size: 12px;
    color: var(--hga-muted);
    line-height: 1.45;
    flex-grow: 1;
}

/* ── Play Button ───────────────────────────────────────────────── */
.hga-play-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 9px 0;
    background: var(--hga-btn);
    border: none;
    border-radius: var(--hga-radius);
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.hga-play-btn:hover { background: var(--hga-btn-h); transform: translateY(-1px); }

/* ── Footer ────────────────────────────────────────────────────── */
.hga-foot {
    text-align: center;
    padding: 16px 20px;
    font-size: 12px;
    color: var(--hga-muted);
    border-top: 1px solid var(--hga-card-bdr);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hga-grid                           { grid-template-columns: repeat(3, 1fr); }
    .hga-card:nth-child(4n)             { border-right: 1px solid var(--hga-card-bdr); }
    .hga-card:nth-child(3n)             { border-right: none; }
}
@media (max-width: 640px) {
    .hga-grid                           { grid-template-columns: repeat(2, 1fr); }
    .hga-card:nth-child(3n)             { border-right: 1px solid var(--hga-card-bdr); }
    .hga-card:nth-child(2n)             { border-right: none; }
    .hga-frame                          { height: 440px; }
}
@media (max-width: 400px) {
    .hga-grid                           { grid-template-columns: 1fr; }
    .hga-card                           { border-right: none; }
    .hga-frame                          { height: 360px; }
}