/* update 150: the HUD of each people (js/racehud.js sets <html data-people> and the palette variables). Human is the stylesheet default plus a hazard-stripe header. */
html[data-people] h1, html[data-people] h2, html[data-people] h3, html[data-people] .btn, html[data-people] #rail .lbl { font-family: var(--head-font); }

/* ---------- Human: steel, rivets, hazard stripes ---------- */
html[data-people="human"] { --head-font: inherit; }
html[data-people="human"] #panel header { border-bottom: 3px solid; border-image: repeating-linear-gradient(135deg, var(--line2) 0 7px, transparent 7px 14px) 1; }
html[data-people="human"] .card { border-left: 3px solid var(--line2); }
html[data-people="human"] #topbar { border-bottom: 1px solid var(--line2); box-shadow: 0 2px 0 rgba(var(--acc-rgb), .08); }

/* ---------- Mentat (sage): glass, soft glow, serif ---------- */
html[data-people="sage"] { --head-font: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
html[data-people="sage"] #panel { backdrop-filter: blur(8px); border-right-color: rgba(var(--acc-rgb), .45); box-shadow: 8px 0 40px rgba(var(--acc-rgb), .08); }
html[data-people="sage"] #panel header { background: linear-gradient(90deg, rgba(var(--acc-rgb), .20), rgba(var(--acc-rgb), .02) 70%, transparent); border-bottom-color: rgba(var(--acc-rgb), .35); }
html[data-people="sage"] .card { border-radius: 12px; border-color: rgba(var(--acc-rgb), .28); box-shadow: 0 0 16px rgba(var(--acc-rgb), .08), inset 0 0 22px rgba(var(--acc-rgb), .05); background-image: linear-gradient(160deg, rgba(var(--acc-rgb), .07), transparent 55%); }
html[data-people="sage"] .btn { clip-path: none; border-radius: 999px; padding-left: 14px; padding-right: 14px; box-shadow: 0 0 10px rgba(var(--acc-rgb), .15); }
html[data-people="sage"] #topbar { border-bottom-color: rgba(var(--acc-rgb), .5); box-shadow: 0 4px 24px rgba(var(--acc-rgb), .18); }
html[data-people="sage"] #rail { border-right-color: rgba(var(--acc-rgb), .4); }

/* ---------- Garmont (insect): hive cells, hex buttons ---------- */
html[data-people="insect"] { --head-font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
html[data-people="insect"] #panel, html[data-people="insect"] .card { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%2381c784' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M14 0v16.3L0 24.5V41l14 8.2 14-8.2V24.5L14 16.3'/%3E%3Cpath d='M0 8.2l14 8.1 14-8.1'/%3E%3C/g%3E%3C/svg%3E"); }
html[data-people="insect"] #panel header { border-bottom: 2px dashed var(--line2); }
html[data-people="insect"] .btn { clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); padding-left: 16px; padding-right: 16px; }
html[data-people="insect"] .card { border-radius: 4px 14px 4px 14px; border-color: rgba(var(--acc-rgb), .3); }
html[data-people="insect"] #topbar { border-bottom: 2px solid rgba(var(--acc-rgb), .4); }

/* ---------- Tantra (reptile): scales, diagonal cuts, ember ---------- */
html[data-people="reptile"] { --head-font: Optima, Candara, "Gill Sans", "Trebuchet MS", sans-serif; }
html[data-people="reptile"] #panel, html[data-people="reptile"] .card { background-image: radial-gradient(circle at 50% 100%, transparent 56%, rgba(var(--acc-rgb), .07) 58%, transparent 62%); background-size: 18px 11px; }
html[data-people="reptile"] #panel header { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 16px) 100%, 0 100%); background: linear-gradient(90deg, rgba(var(--acc-rgb), .26), transparent); border-bottom-color: rgba(var(--acc-rgb), .5); }
html[data-people="reptile"] .btn { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); letter-spacing: .09em; }
html[data-people="reptile"] .card { border-left: 3px solid rgba(var(--acc-rgb), .7); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
html[data-people="reptile"] #topbar { border-bottom: 2px solid rgba(var(--acc-rgb), .55); }

/* ---------- Cyberia (android): neon lines, scanlines, monospace ---------- */
html[data-people="android"] { --head-font: var(--mono); }
html[data-people="android"] #topbar, html[data-people="android"] #rail, html[data-people="android"] .btn, html[data-people="android"] #hud { font-family: var(--mono); }
html[data-people="android"] #panel, html[data-people="android"] .card { background-image: repeating-linear-gradient(0deg, rgba(var(--acc-rgb), .04) 0 1px, transparent 1px 3px); }
html[data-people="android"] .card { border-radius: 0; border-color: rgba(var(--acc-rgb), .35); box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .08), 0 0 12px rgba(var(--acc-rgb), .10); }
html[data-people="android"] .btn { clip-path: none; border-radius: 0; border-color: rgba(var(--acc-rgb), .5); box-shadow: 0 0 8px rgba(var(--acc-rgb), .18); text-shadow: 0 0 6px rgba(var(--acc-rgb), .5); }
html[data-people="android"] #panel header { border-bottom-color: var(--cyan); box-shadow: 0 1px 12px rgba(var(--acc-rgb), .3); }
html[data-people="android"] #panel header h2::before { content: "// "; color: var(--cyan); opacity: .8; }
html[data-people="android"] #topbar { border-bottom: 1px solid var(--cyan); box-shadow: 0 1px 14px rgba(var(--acc-rgb), .35); }
html[data-people="android"] #rail { border-right: 1px solid rgba(var(--acc-rgb), .6); }
html[data-people="android"] h1, html[data-people="android"] h2, html[data-people="android"] h3 { text-shadow: 0 0 8px rgba(var(--acc-rgb), .45); }

/* ---------- Bantu (lithoid): sandstone, arches, an arabesque border ---------- */
html[data-people="lithoid"] { --head-font: Georgia, "Palatino Linotype", "Times New Roman", serif; }
html[data-people="lithoid"] #panel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23e5b250' stroke-opacity='.07' stroke-width='.7'%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Crect x='5' y='5' width='14' height='14' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E"); }
html[data-people="lithoid"] #panel header, html[data-people="lithoid"] #topbar { border-bottom: 8px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cg fill='none' stroke='%23e5b250' stroke-opacity='.75' stroke-width='.8'%3E%3Cpath d='M0 7.5h16'/%3E%3Cpath d='M8 .8L11.2 4 8 7.2 4.8 4z'/%3E%3Cpath d='M0 4h2M14 4h2'/%3E%3C/g%3E%3C/svg%3E") 0 0 8 0 / 0 0 8px 0 round; }
html[data-people="lithoid"] .card { border-radius: 16px 16px 4px 4px; border-color: rgba(var(--acc-rgb), .35); background-image: linear-gradient(180deg, rgba(var(--acc-rgb), .08), transparent 40%); }
html[data-people="lithoid"] .btn { clip-path: none; border-radius: 14px 14px 3px 3px; border-color: rgba(var(--acc-rgb), .55); }
html[data-people="lithoid"] #rail { border-right: 2px solid rgba(var(--acc-rgb), .45); }
html[data-people="lithoid"] h1, html[data-people="lithoid"] h2, html[data-people="lithoid"] h3 { letter-spacing: .1em; }