/* HONOR OF HEARTS — honorofhearts.com (July 19 2026)
   The site wears the GAME's menu language (ui/MenuKit.ts palette):
   navy plates, red/blue dual rims, gold accents, Georgia serif. */

:root {
    --bg: #060d20;
    --field: #0a1430;
    --panel: #0c1a33;
    --panel-dark: #070f22;
    --rim-blue: #4a7bd0;
    --rim-red: #c0182e;
    --gold: #ffd700;
    --header: #e8b4b8;
    --muted: #8fa3d0;
    --ink: #ffffff;
    --hotkey: #e04050;
    --ice: #7fd0ff;
    --rose: #ff7f90;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    min-height: 100vh;
}

a { color: var(--ice); text-decoration: none; }
a:hover { color: var(--gold); }

/* ---------------- nav ---------------- */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; gap: 26px;
    padding: 10px 28px;
    background: rgba(6, 13, 32, 0.92);
    border-bottom: 1px solid rgba(74, 123, 208, 0.45);
    backdrop-filter: blur(6px);
}
nav .mark { display: flex; align-items: center; gap: 12px; margin-right: auto; }
nav .mark img { height: 44px; }
nav .mark span { color: var(--header); font-size: 18px; letter-spacing: 1px; }
nav a.link {
    color: var(--ink); font-size: 15px; letter-spacing: 2px;
    padding: 6px 2px; border-bottom: 2px solid transparent;
}
nav a.link:hover { color: var(--gold); }
nav a.link.active { color: var(--gold); border-bottom-color: var(--rim-red); }
nav a.play-cta {
    background: #8e1020; border: 1.5px solid #ff4a5a;
    color: var(--ink); padding: 8px 22px; font-size: 15px; letter-spacing: 2px;
}
nav a.play-cta:hover { color: var(--gold); box-shadow: 0 0 14px rgba(255, 74, 90, 0.5); }

/* ---------------- hero ---------------- */
.hero {
    position: relative; min-height: 96vh;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    /* Omini ruling (July 19 2026): full-bleed cover, NEVER letterbox; the
       emblem must read WHOLE — the painting starts below the floating nav
       (offset 72px) and the strip above is intentional dark negative space */
    background: url("../assets/bg.jpg") center 72px / cover no-repeat var(--bg);
    padding-bottom: 8vh; text-align: center;
}
/* headline clears the emblem by ~an inch AT EVERY WINDOW SIZE (owner report
   July 19 2026: it crowded the logo's falling cards on short windows) — the
   gap tracks the IMAGE's scale (29.5vw ≈ the emblem's height under cover),
   with a viewport floor for tall narrow windows */
.hero h1 { margin-top: max(calc(72px + 29.5vw + 80px), 62vh); }
.hero::before {
    /* grounds the floating nav and hides the image's offset seam:
       opaque navy at the very top fading out over the glass */
    content: ""; position: absolute; inset: 0 0 auto 0; height: 170px;
    background: linear-gradient(180deg, var(--bg) 46%, rgba(6,13,32,0) 100%);
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,13,32,0) 60%, rgba(6,13,32,0.92) 100%);
}
.hero > * { position: relative; z-index: 2; }
.hero h1 {
    color: var(--header); font-size: clamp(26px, 4vw, 44px); letter-spacing: 3px;
    text-shadow: 0 2px 12px #000;
}
.hero p.tag {
    color: var(--ink); font-size: clamp(15px, 2vw, 19px); margin-top: 10px;
    text-shadow: 0 2px 8px #000;
}

/* dual-rim plate button — the game's menuButton, in CSS */
.btn {
    display: inline-block; position: relative;
    background: var(--panel); border: 1.5px solid var(--rim-blue);
    box-shadow: 0 0 0 4px var(--rim-red);
    color: var(--ink); font-family: Georgia, serif;
    font-size: clamp(16px, 2vw, 21px); letter-spacing: 2px;
    padding: 14px 46px; margin-top: 26px; cursor: pointer;
}
.btn:hover { color: var(--gold); box-shadow: 0 0 0 4px var(--rim-red), 0 0 22px rgba(232, 80, 106, 0.55); }
.btn .hk { color: var(--hotkey); }
.btn.primary { background: #8e1020; border-color: #ff4a5a; }
.btn.small { padding: 9px 26px; font-size: 15px; box-shadow: 0 0 0 3px var(--rim-red); }

/* ---------------- sections ---------------- */
main { max-width: 1080px; margin: 0 auto; padding: 56px 22px 80px; }
h2.section {
    color: var(--header); text-align: center; letter-spacing: 3px;
    font-size: clamp(20px, 3vw, 28px); margin: 46px 0 8px;
}
h2.section::after {
    content: ""; display: block; width: 130px; height: 2px; margin: 12px auto 0;
    background: linear-gradient(90deg, transparent, var(--rim-red), transparent);
}
p.lead { color: var(--muted); text-align: center; max-width: 640px; margin: 8px auto 30px; font-size: 15px; line-height: 1.6; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin-top: 26px; }
.card {
    background: var(--panel-dark); border: 1px solid rgba(74, 123, 208, 0.55);
    box-shadow: 0 0 0 3px rgba(192, 24, 46, 0.5);
    padding: 26px 22px;
}
.card h3 { color: var(--gold); font-size: 18px; letter-spacing: 1px; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 14px; line-height: 1.65; }

/* ---------------- forms ---------------- */
.panel {
    background: var(--panel-dark); border: 1px solid rgba(74, 123, 208, 0.55);
    box-shadow: 0 0 0 3px rgba(192, 24, 46, 0.5);
    padding: 34px 30px; max-width: 640px; margin: 30px auto;
}
label { display: block; color: var(--header); font-size: 14px; letter-spacing: 1px; margin: 16px 0 6px; }
input, textarea {
    width: 100%; background: var(--field); color: var(--ink);
    border: 1px solid var(--rim-blue); padding: 11px 12px;
    font-family: Georgia, serif; font-size: 15px;
}
input:focus, textarea:focus { outline: 2px solid var(--gold); }
textarea { min-height: 150px; resize: vertical; }
.form-note { color: var(--muted); font-size: 12.5px; margin-top: 14px; }
.form-status { margin-top: 16px; font-size: 15px; min-height: 22px; }
.form-status.ok { color: #8fe89a; }
.form-status.err { color: var(--rose); }

/* ---------------- account ---------------- */
.rank-chip {
    text-align: center; margin: 6px auto 2px; color: var(--gold);
    font-size: clamp(22px, 3vw, 30px); letter-spacing: 3px;
}
.rank-sub { text-align: center; color: var(--ink); font-size: 15px; margin-top: 8px; }
.rank-delta { text-align: center; font-size: 15px; margin-top: 6px; }
table.history { width: 100%; border-collapse: collapse; margin-top: 18px; }
table.history th, table.history td {
    padding: 9px 10px; font-size: 14px; text-align: left;
    border-bottom: 1px solid rgba(74, 123, 208, 0.25);
}
table.history th { color: var(--header); letter-spacing: 1px; font-weight: normal; }
td.win { color: var(--ice); }
td.loss { color: var(--rose); }

/* ---------------- news (Omini: horizontal chips, never a blog roll) ---------------- */
.news-chip {
    display: flex; gap: 22px; align-items: flex-start;
    background: rgba(7, 15, 34, 0.8);
    border: 1px solid rgba(74, 123, 208, 0.45);
    padding: 22px 24px; margin: 18px 0;
    transition: border-color .25s, box-shadow .25s;
}
.news-chip:hover {
    border-color: rgba(232, 80, 106, 0.8);
    box-shadow: 0 0 18px rgba(232, 80, 106, 0.35), 0 0 40px rgba(63, 169, 255, 0.15);
}
.news-date {
    color: var(--ice); font-size: 13px; letter-spacing: 1.5px; white-space: nowrap;
    min-width: 108px; padding: 3px 16px 3px 0;
    border-right: 1px solid rgba(74, 123, 208, 0.35);
}
.news-body h3 { color: var(--gold); font-size: 17px; letter-spacing: 1.5px; margin-bottom: 8px; }
.news-body p { color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.7; }

/* chips are LINKS now (owner report July 19 2026: the hover glow promised a
   click that did nothing) — whole-chip anchor, visible focus for keyboards */
a.news-chip { color: inherit; }
.news-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.news-chip .read-more {
    display: inline-block; margin-top: 12px; padding: 4px 0;
    color: var(--ice); font-size: 13px; letter-spacing: 1.5px;
}
.news-chip:hover .read-more, .news-chip:focus-visible .read-more { color: var(--gold); }

/* single-dispatch view (Omini: ONE massive dark plaque over the field —
   gold serif title, ice date on the left edge, silver-grey sans body) */
.back-link {
    display: inline-block; margin: 2px 0 8px; padding: 10px 0;
    color: var(--ice); font-size: 14px; letter-spacing: 1.5px;
}
.back-link:hover { color: var(--gold); }
.post-plaque {
    background: rgba(7, 15, 34, 0.85);
    border: 1px solid rgba(74, 123, 208, 0.5);
    box-shadow: 0 0 0 3px rgba(192, 24, 46, 0.45);
    padding: 34px 38px; margin: 6px 0 40px;
}
.post-plaque h2 { color: var(--gold); font-size: clamp(20px, 3vw, 26px); letter-spacing: 2px; }
.post-date { color: var(--ice); font-size: 13px; letter-spacing: 2px; margin: 10px 0 22px; }
.post-body {
    color: #b9c4dd; font-family: Arial, Helvetica, sans-serif;
    font-size: 15px; line-height: 1.75; white-space: pre-line;
}
.post-comments-head {
    color: var(--header); font-size: 15px; letter-spacing: 2px;
    margin: 30px 0 4px; display: flex; gap: 14px; align-items: baseline;
}
.post-comments-head .c-count { color: var(--muted); font-size: 12.5px; letter-spacing: 1px; }
@media (max-width: 700px) { .post-plaque { padding: 24px 18px; } }

/* ---------------- account gateway (Omini: inset plates, gold underline only) -- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; max-width: 940px; margin: 30px auto; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }
.auth input {
    background: var(--field); border: none; border-bottom: 1px solid var(--gold);
    color: var(--ink); padding: 12px 12px;
}
.auth input::placeholder { color: #6d7fa8; }
.auth input:focus { outline: none; border-bottom: 2px solid var(--gold); }
.auth-divider {
    display: flex; align-items: center; gap: 14px; color: var(--muted);
    font-size: 12px; letter-spacing: 2px; margin: 26px 0 6px;
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: rgba(183, 110, 121, 0.45);
}
.claim-panel { position: relative; }
.btn.claim {
    animation: claimPulse 2.6s ease-in-out infinite;
}
@keyframes claimPulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--rim-red), 0 0 22px rgba(63, 169, 255, 0.55); }
    50%      { box-shadow: 0 0 0 4px var(--rim-red), 0 0 26px rgba(232, 80, 106, 0.65); }
}

/* ---------------- prototype watermark (Omini: recedes, never a ribbon) ---- */
.proto-mark {
    position: fixed; right: 14px; bottom: 10px; z-index: 60;
    font-family: "Segoe UI", Arial, sans-serif; font-size: 12px;
    letter-spacing: 3px; color: #8fa3d0; opacity: 0.32;
    pointer-events: none; user-select: none;
}

/* ---------------- comments (Omini: chips, gold names, ice dates) ---------- */
.comments { margin: 14px 0 4px 130px; }
@media (max-width: 700px) { .comments { margin-left: 0; } }
.comment-chip {
    background: rgba(10, 20, 48, 0.75);
    border: 1px solid rgba(74, 123, 208, 0.3);
    padding: 12px 16px; margin: 10px 0;
    display: flex; gap: 14px; align-items: flex-start;
}
.comment-main { flex: 1; min-width: 0; }

/* reddit-style votes (Omini: cluster docked far-left, luminous ice ▲,
   silver-grey count; 44px touch law) */
.vote-col { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.vote-btn {
    background: none; border: none; cursor: pointer; padding: 8px 12px;
    color: #5a7fae; font-size: 18px; line-height: 1;
    transition: color .2s, text-shadow .2s;
}
.vote-btn:hover:not(:disabled), .vote-btn:focus-visible { color: var(--ice); }
.vote-btn.voted { color: var(--ice); text-shadow: 0 0 10px rgba(127, 208, 255, 0.85); }
.vote-btn:disabled { cursor: default; opacity: 0.45; }
.vote-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.vote-count { color: #9aa8c8; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.comment-head { display: flex; gap: 12px; align-items: baseline; }
.comment-head .c-date { color: var(--ice); font-size: 11.5px; letter-spacing: 1px; white-space: nowrap; }
.comment-head .c-name { color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.comment-chip p { color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-size: 13.5px; line-height: 1.6; margin-top: 6px; }
.comment-form { margin-top: 12px; }
.comment-form textarea {
    width: 100%; min-height: 64px; background: var(--field); color: var(--ink);
    border: none; border-bottom: 1px solid var(--gold);
    font-family: Arial, Helvetica, sans-serif; font-size: 13.5px; padding: 10px;
    resize: vertical;
}
.comment-form textarea::placeholder { color: #6d7fa8; }
.comment-form textarea:focus { outline: none; border-bottom: 2px solid var(--gold); }
.comment-note { color: var(--muted); font-size: 12px; margin-top: 8px; }
.comment-toggle {
    background: none; border: none; color: var(--ice); cursor: pointer;
    font-family: Georgia, serif; font-size: 13px; letter-spacing: 1px; padding: 0;
}
.comment-toggle:hover { color: var(--gold); }

/* audio attachment (Omini: tight navy plaque, thin rim — never a bare
   browser widget floating on the page) */
.news-audio {
    margin-top: 16px; padding: 12px 16px; max-width: 640px;
    background: rgba(7, 15, 34, 0.8);
    border: 1px solid rgba(74, 123, 208, 0.5);
    box-shadow: 0 0 0 3px rgba(192, 24, 46, 0.35);
    display: flex; align-items: center; gap: 14px;
}
.news-audio .audio-cap { color: var(--gold); font-size: 13px; letter-spacing: 2px; white-space: nowrap; }
.news-audio audio { flex: 1; min-width: 0; height: 40px; }

/* signed-out notice on the news archive */
.signin-note { text-align: center; color: var(--muted); font-size: 13.5px; margin: 4px auto 14px; }
.signin-note a { letter-spacing: 1.5px; }

/* news media */
.news-media { margin-top: 14px; }
.news-media iframe {
    width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border: 1px solid rgba(74, 123, 208, 0.5);
    box-shadow: 0 0 0 3px rgba(192, 24, 46, 0.4); background: #000;
}
.news-link {
    display: inline-block; margin-top: 12px; padding: 8px 18px;
    background: var(--panel); border: 1px solid var(--rim-blue);
    box-shadow: 0 0 0 3px var(--rim-red);
    color: var(--ink); font-size: 14px; letter-spacing: 1px;
}
.news-link:hover { color: var(--gold); }

/* admin composer */
.composer { border-color: rgba(255, 215, 0, 0.4); }
.composer input, .composer textarea {
    background: var(--field); border: none; border-bottom: 1px solid var(--gold);
    color: var(--ink); width: 100%; padding: 10px; font-family: Georgia, serif;
}
.composer textarea { min-height: 110px; font-family: Arial, sans-serif; font-size: 14px; }
.composer input:focus, .composer textarea:focus { outline: none; border-bottom: 2px solid var(--gold); }

/* ---------------- footer ---------------- */
footer {
    /* Omini: the footer grounds the page like the edge of a premium card mat —
       navy fading to absolute black, thin rose-gold hairline above */
    border-top: 1px solid rgba(183, 110, 121, 0.5);
    background: linear-gradient(180deg, var(--bg) 0%, #000000 100%);
    padding: 26px 20px 38px; text-align: center; color: var(--muted); font-size: 13px;
}
footer .foot-tag { color: var(--header); letter-spacing: 2px; margin-bottom: 8px; font-size: 14px; }

@media (max-width: 700px) {
    nav { gap: 14px; padding: 8px 12px; flex-wrap: wrap; }
    nav .mark span { display: none; }
    .hero { min-height: 78vh; }
    /* the composer is a real blog tool on a phone too (owner report July 20
       2026: couldn't post from mobile) — full-width fields, tall body,
       44px targets, no horizontal scroll down to 320px */
    .composer { padding: 22px 14px; }
    .composer textarea { min-height: 220px; font-size: 16px; }
    .composer input { font-size: 16px; padding: 12px 10px; }
    .news-chip { flex-direction: column; gap: 8px; }
    .news-date { border-right: none; min-width: 0; padding: 0; }
}