#hf-app{--ink:#e8edf2;--muted:#91a0ad;--panel:#131b22;--line:#293742;--accent:#d2a84a;color:var(--ink);font-family:system-ui,-apple-system,sans-serif;position:relative;left:50%;width:min(1500px,calc(100vw - 20px));max-width:none;transform:translateX(-50%);margin:20px 0;background:#0b1116;padding:24px;border-radius:18px;box-sizing:border-box}
#hf-app *{box-sizing:border-box}#hf-app button,#hf-app input{font:inherit}.hf-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}.hf-home{text-align:center;padding:70px 25px}.hf-home h1{font-size:clamp(38px,7vw,78px);margin:0;text-transform:uppercase;letter-spacing:.04em}.hf-home>p:not(.hf-kicker){color:var(--muted);font-size:18px}.hf-kicker{color:var(--accent);text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800;margin:0 0 8px}.hf-home-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:35px}
#hf-app button{border:1px solid #b48b34;background:var(--accent);color:#15120b;border-radius:8px;padding:11px 16px;font-weight:750;cursor:pointer}#hf-app button:hover{filter:brightness(1.08)}#hf-app button:disabled{opacity:.45;cursor:not-allowed}.hf-secondary,#hf-app .hf-link{background:transparent;color:var(--ink);border-color:var(--line)}
#hf-auth{max-width:1100px;margin:auto}#hf-auth label{display:block;margin:14px 0;color:var(--muted)}#hf-auth input{display:block;width:100%;max-width:420px;margin-top:6px;background:#091016;color:var(--ink);border:1px solid var(--line);padding:11px;border-radius:7px}#hf-auth input[type=color]{width:70px;height:44px;padding:4px}.hf-message{min-height:24px;color:#f0bd63;font-weight:700}
.hf-game-header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.hf-game-header h2{margin:0;font-size:32px}.hf-stats{display:flex;align-items:center;gap:14px;font-weight:800}.hf-layout{display:grid;grid-template-columns:minmax(600px,1fr) 320px;gap:18px}.hf-map-panel{min-width:0;overflow:auto;padding-bottom:8px}.hf-map{--map-size:24;display:grid;grid-template-columns:repeat(var(--map-size),34px);grid-auto-rows:34px;width:max-content;border:3px solid #394853;background:#080c0f;box-shadow:0 18px 55px #0008}.hf-tile{position:relative!important;width:34px!important;height:34px!important;min-width:0!important;padding:0!important;border:1px solid #1c282f!important;border-radius:0!important;background:#26362f!important;color:#9eb0a6!important;font-size:13px!important}.hf-tile::after{content:"";position:absolute;inset:3px;border:3px solid var(--owner);opacity:.9}.hf-tile.hf-owned{background:color-mix(in srgb,var(--owner) 42%,#1a2428)!important}.hf-tile.hf-forest{background-color:#183126!important}.hf-tile.hf-mountain{background-color:#3b3934!important}.hf-tile.hf-water{background-color:#17394a!important;color:#73a8c0!important}.hf-tile.hf-source-selected{outline:3px solid #66e0ff;z-index:3}.hf-tile.hf-target-selected{outline:3px solid #ffcf66;z-index:3}.hf-tile.hf-start{outline:3px solid #ffdc66;z-index:3}.hf-create-map{margin-top:24px;max-width:100%;overflow:auto}.hf-legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:10px}
.hf-layers{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.hf-layers button{background:#111a21!important;color:var(--muted)!important;border-color:var(--line)!important}.hf-layers button.is-active{background:var(--accent)!important;color:#15120b!important}.hf-tile.hf-unsupplied{filter:saturate(.25);opacity:.65}.hf-roster-row{display:grid!important;grid-template-columns:auto 1fr!important;text-align:left!important;background:#0c141a!important;color:var(--ink)!important;border-color:var(--line)!important;font-weight:500!important}.hf-roster-row span{font-size:12px}.hf-roster-row em{grid-column:1/-1;color:var(--muted);font-size:11px}.hf-line,.hf-project{display:grid;gap:6px;border-top:1px solid var(--line);padding:10px 0;font-size:12px}.hf-line select,.hf-project input,#hf-building-type{width:100%;background:#091016;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:7px}#hf-industry-panel>button{width:100%;margin:9px 0}
.hf-sidebar{display:grid;gap:10px;align-content:start;position:sticky;top:10px;max-height:calc(100vh - 20px);overflow:auto}.hf-sidebar .hf-panel{padding:16px}.hf-sidebar h3{margin:0 0 12px}.hf-side-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:sticky;top:0;z-index:5;background:#0b1116;padding-bottom:5px}.hf-side-tabs button{padding:8px 4px!important;background:#111a21!important;color:var(--muted)!important;border-color:var(--line)!important;font-size:12px!important}.hf-side-tabs button.is-active{background:var(--accent)!important;color:#15120b!important}.hf-actions button{display:block;width:100%;margin:8px 0}.hf-actions p{color:var(--muted);margin:7px 0}.hf-unit-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.hf-unit-picker label{font-size:11px;color:var(--muted)}.hf-unit-picker input{display:block;width:100%;margin-top:4px;background:#091016;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:6px}.hf-rules{color:var(--muted);font-size:12px;margin-top:12px}.hf-rules p{margin:4px 0}.hf-help{border-top:1px solid var(--line);margin-top:16px;padding-top:12px;color:var(--muted);font-size:12px}.hf-help h4{color:var(--ink);margin:0 0 5px}.hf-faction-row{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}.hf-faction-row i{width:12px;height:12px;border-radius:50%}#hf-log{max-height:300px;overflow:auto}#hf-log p{font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);padding:7px 0;margin:0}
.hf-guide{margin-top:24px;max-width:1000px}.hf-guide>h2{margin-top:0}.hf-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hf-guide article{background:#0c141a;border:1px solid var(--line);border-radius:9px;padding:14px}.hf-guide article h3{margin:0 0 7px;color:var(--accent);font-size:15px}.hf-guide article p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.hf-settings-reference{margin-top:16px}.hf-settings-reference>div{display:flex;flex-wrap:wrap;gap:8px}.hf-settings-reference span{background:#0c141a;border:1px solid var(--line);border-radius:7px;padding:8px 10px;color:var(--muted);font-size:12px}
@media(max-width:950px){#hf-app{padding:12px}.hf-layout{grid-template-columns:1fr}.hf-sidebar{position:static;max-height:none;overflow:visible}.hf-game-header{align-items:flex-start;flex-direction:column}.hf-map-panel{margin-right:-12px}.hf-home{padding:45px 15px}.hf-guide-grid{grid-template-columns:1fr}}
.hf-industry-guide {
    margin-top: 18px;
}

.hf-industry-guide h4,
.hf-industry-guide h5 {
    color: var(--ink);
}

.hf-industry-guide h4 {
    margin: 0 0 8px;
}

.hf-industry-guide h5 {
    margin: 18px 0 8px;
    font-size: 13px;
}

.hf-industry-guide > p {
    line-height: 1.5;
}

.hf-guide-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.hf-cost-table {
    width: 100%;
    min-width: 280px;
    border-collapse: collapse;
    font-size: 12px;
}

.hf-cost-table th,
.hf-cost-table td {
    padding: 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.hf-cost-table th {
    color: var(--ink);
    background: #0c141a;
    font-weight: 700;
}

.hf-cost-table td {
    color: var(--muted);
}

.hf-cost-table td:nth-child(2) {
    color: var(--accent);
    font-weight: 700;
    white-space: nowrap;
}

.hf-cost-table tr:last-child td {
    border-bottom: 0;
}

.hf-table-note {
    margin: 7px 0 0 !important;
    font-size: 11px;
    font-style: italic;
    color: var(--muted);
}
.hf-factory-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 10px 0 14px;
}

.hf-factory-summary span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 4px;
    color: var(--muted);
    background: #0c141a;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hf-factory-summary strong {
    color: var(--accent);
    font-size: 18px;
    line-height: 1;
}