:root {
    --invad-panel: rgba(18, 26, 14, 0.78);
    --invad-panel-border: rgba(11, 14, 8, 0.65);
    --invad-bg: rgb(144, 187, 99);
}
* { box-sizing: border-box; }
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--invad-bg);
    color: rgb(235, 241, 221);
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
body { min-width: 320px; }
button,
input { font: inherit; }
button { cursor: pointer; }
.portal-root,
.invad-game-root {
    position: fixed;
    inset: 0;
    overflow: hidden;
}
.portal-root {
    display: grid;
    place-items: center;
    background: rgb(63, 82, 45);
}
.portal-root::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(8, 12, 7, 0.18), rgba(8, 12, 7, 0.58)),
        url("assets/invad-arena-background.png?v=6a7243caf822fdb9da8051646ab4bdd1b7c18dcd4cd000dd429d6b9d0b3e2c7b") center / cover no-repeat;
    transform: scale(1.02);
}
.portal-root::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 46%, rgba(86, 119, 48, 0.18), rgba(8, 11, 6, 0.58) 78%),
        linear-gradient(90deg, rgba(8, 11, 6, 0.48), transparent 22%, transparent 78%, rgba(8, 11, 6, 0.48));
    pointer-events: none;
}
.portal-root > .portal-hex-overlay {
    z-index: 1;
    opacity: 0.2;
}
.portal-hex-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.34;
    background-image:
        linear-gradient(30deg, rgba(22, 30, 14, 0.45) 12%, transparent 12.5%, transparent 87%, rgba(22, 30, 14, 0.45) 87.5%, rgba(22, 30, 14, 0.45)),
        linear-gradient(150deg, rgba(22, 30, 14, 0.45) 12%, transparent 12.5%, transparent 87%, rgba(22, 30, 14, 0.45) 87.5%, rgba(22, 30, 14, 0.45)),
        linear-gradient(90deg, rgba(24, 37, 15, 0.35) 2%, transparent 2.5%, transparent 97%, rgba(24, 37, 15, 0.35) 97.5%, rgba(24, 37, 15, 0.35));
    background-size: 24px 42px;
    pointer-events: none;
}
.portal-main {
    position: relative;
    z-index: 2;
    width: min(860px, 95vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.portal-main h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(54px, 9vw, 86px);
    letter-spacing: 0.06em;
    color: rgb(237, 247, 215);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.65),
        0 0 14px rgba(227, 255, 166, 0.35);
}
.portal-main h1 em {
    color: rgb(183, 239, 119);
    font-style: normal;
}
.portal-mid-row {
    width: 100%;
    display: grid;
    grid-template-columns: 210px 1fr 210px;
    gap: 16px;
    align-items: stretch;
}
.portal-card,
.portal-play,
.portal-info-box,
.portal-panel {
    border-radius: 18px;
    border: 2px solid var(--invad-panel-border);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(211, 255, 164, 0.12);
    background: var(--invad-panel);
    backdrop-filter: blur(2px);
}
.portal-card {
    padding: 12px;
    display: grid;
    gap: 12px;
}
.portal-card button {
    border: 1px solid rgba(20, 25, 14, 0.8);
    border-radius: 12px;
    padding: 12px 10px;
    color: rgb(242, 248, 226);
    font-size: 24px;
    font-family: Georgia, "Times New Roman", serif;
    background: linear-gradient(180deg, rgb(86, 117, 160), rgb(53, 81, 125));
}
.portal-label {
    font-size: 19px;
    color: rgb(232, 243, 215);
    letter-spacing: 0.02em;
    font-family: Georgia, "Times New Roman", serif;
}
.portal-name-input,
.portal-server-input {
    width: 100%;
    border: 1px solid rgba(27, 34, 19, 0.84);
    border-radius: 12px;
    padding: 10px 12px;
    color: rgb(237, 244, 226);
    font-size: 23px;
    font-family: Georgia, "Times New Roman", serif;
    background: linear-gradient(180deg, rgb(129, 109, 74), rgb(99, 81, 51));
}
.portal-server-input { font-size: 13px; }
.portal-name-input:focus,
.portal-server-input:focus {
    outline: 2px solid rgba(171, 224, 105, 0.65);
    outline-offset: 1px;
}
.portal-team button:first-child { background: linear-gradient(180deg, rgb(127, 103, 169), rgb(97, 77, 136)); }
.portal-team button:last-child { background: linear-gradient(180deg, rgb(156, 77, 115), rgb(117, 50, 79)); }
.portal-play {
    min-height: 172px;
    padding: 18px 24px;
    display: grid;
    place-items: center;
    gap: 16px;
}
.portal-mode-row {
    display: flex;
    gap: 8px;
}
.portal-mode-btn {
    border: 1px solid rgba(10, 13, 7, 0.85);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 18px;
    color: rgb(220, 235, 197);
    font-family: Georgia, "Times New Roman", serif;
    background: linear-gradient(180deg, rgb(47, 61, 37), rgb(32, 42, 24));
}
.portal-mode-btn.is-active {
    color: rgb(30, 42, 15);
    background: linear-gradient(180deg, rgb(200, 238, 144), rgb(149, 206, 89));
}
.portal-play-title {
    font-size: clamp(38px, 4.4vw, 64px);
    color: rgb(184, 231, 126);
    letter-spacing: 0.06em;
    font-family: Georgia, "Times New Roman", serif;
    text-shadow: 0 2px 0 rgba(7, 10, 5, 0.6);
}
.invad-connect {
    border: 1px solid rgba(10, 13, 7, 0.85);
    border-radius: 14px;
    padding: 12px 26px;
    font-size: 26px;
    font-family: Georgia, "Times New Roman", serif;
    color: rgb(30, 42, 15);
    background: linear-gradient(180deg, rgb(200, 238, 144), rgb(149, 206, 89));
}
.invad-connect:disabled {
    opacity: 0.7;
    cursor: wait;
}
.portal-info-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.portal-info-box {
    min-width: 160px;
    padding: 12px 14px;
}
.portal-info-box h4 {
    margin: 0 0 6px;
    font-size: 24px;
    font-family: Georgia, "Times New Roman", serif;
    color: rgb(216, 238, 192);
}
.portal-info-box p {
    margin: 0;
    font-size: 16px;
    color: rgb(165, 213, 138);
}
.portal-panel {
    position: fixed;
    top: 20px;
    width: 210px;
    padding: 14px;
    z-index: 2;
}
.portal-panel-left { left: 18px; }
.portal-panel-right { right: 18px; }
.portal-panel h3 {
    margin: 0 0 10px;
    font-size: 31px;
    font-family: Georgia, "Times New Roman", serif;
    color: rgb(236, 246, 216);
}
.portal-panel ul {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
    font-size: 17px;
}
.portal-panel li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: rgb(199, 222, 171);
}
.portal-settings {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 126px;
    height: 126px;
    border-radius: 999px;
    border: 3px solid rgba(17, 26, 12, 0.86);
    background:
        radial-gradient(circle at 50% 40%, rgb(148, 204, 101) 0, rgb(112, 153, 71) 56%, rgb(53, 80, 38) 100%);
    color: rgb(239, 247, 226);
    font-size: 32px;
    font-family: Georgia, "Times New Roman", serif;
    z-index: 2;
}
.portal-bottom-nav {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    width: min(1120px, 96vw);
    padding: 14px;
    border-radius: 22px;
    border: 2px solid var(--invad-panel-border);
    background: rgba(16, 21, 14, 0.86);
}
.portal-bottom-nav button {
    border: 1px solid rgba(11, 14, 7, 0.82);
    border-radius: 16px;
    padding: 14px 10px;
    font-size: 25px;
    font-family: Georgia, "Times New Roman", serif;
    color: rgb(236, 244, 223);
    background: linear-gradient(180deg, rgb(96, 117, 63), rgb(79, 96, 53));
}
.portal-bottom-nav button:nth-child(1) { background: linear-gradient(180deg, rgb(147, 47, 35), rgb(113, 33, 23)); }
.portal-bottom-nav button:nth-child(2) { background: linear-gradient(180deg, rgb(126, 131, 30), rgb(98, 102, 15)); }
.portal-bottom-nav button:nth-child(3) { background: linear-gradient(180deg, rgb(35, 140, 36), rgb(20, 105, 20)); }
.portal-bottom-nav button:nth-child(4) { background: linear-gradient(180deg, rgb(31, 128, 145), rgb(19, 97, 111)); }
.portal-bottom-nav button:nth-child(5) { background: linear-gradient(180deg, rgb(36, 50, 148), rgb(27, 34, 111)); }
.portal-bottom-nav button:nth-child(6) { background: linear-gradient(180deg, rgb(113, 37, 142), rgb(87, 28, 111)); }
.portal-bottom-nav button:nth-child(7) { background: linear-gradient(180deg, rgb(133, 137, 136), rgb(99, 101, 102)); }
.portal-bottom-nav button:nth-child(8) { background: linear-gradient(180deg, rgb(113, 144, 102), rgb(90, 116, 81)); }
.portal-error {
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    z-index: 5;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 17px;
    color: rgb(255, 210, 210);
    background: rgba(90, 0, 0, 0.86);
    border: 1px solid rgba(255, 168, 168, 0.7);
}
.invad-game-root {
    display: none;
    background:
        radial-gradient(circle at 50% 40%, rgba(197, 240, 120, 0.18), transparent 48%),
        linear-gradient(170deg, rgb(132, 171, 87) 0%, rgb(126, 162, 79) 100%);
}
body.game-running .portal-root { display: none; }
body.game-running .invad-game-root { display: block; }
.invad-stage {
    position: relative;
    width: 100%;
    height: 100%;
}
.invad-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
}
.invad-game-hud {
    position: fixed;
    left: 12px;
    top: 44px;
    z-index: 4;
    display: none;
    grid-template-columns: repeat(5, auto);
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(10, 14, 8, 0.72);
    color: rgb(203, 213, 225);
    font: 14px monospace;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.invad-game-hud strong {
    display: inline;
    color: rgb(248, 250, 252);
    font: inherit;
    line-height: inherit;
}
.invad-status {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    max-width: min(520px, calc(100vw - 24px));
    min-height: 0;
    padding: 0;
    color: rgba(203, 213, 225, 0.55);
    font: 12px monospace;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    pointer-events: none;
    background: transparent;
    border: 0;
    box-shadow: none;
}
@media (max-width: 1100px) {
    .portal-panel { display: none; }
    .portal-mid-row { grid-template-columns: 180px 1fr 180px; }
}
@media (max-width: 900px) {
    .portal-main {
        gap: 16px;
        width: min(94vw, 680px);
    }
    .portal-mid-row { grid-template-columns: 1fr; }
    .portal-card,
    .portal-play { min-height: 0; }
    .portal-bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .portal-settings {
        width: 98px;
        height: 98px;
        font-size: 24px;
    }
    .invad-game-hud {
        right: 12px;
        grid-template-columns: repeat(3, auto);
    }
}

/* In-match HUD */
body.debug-hud .invad-game-hud { display: grid; }
.invad-hud {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    font-family: "Trebuchet MS", "Lucida Sans Unicode", sans-serif;
    color: rgb(235, 241, 221);
}
.hud-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 12px;
    border: 1px solid var(--invad-panel-border);
    background: var(--invad-panel);
    font-size: 14px;
    letter-spacing: 0.06em;
    color: rgb(199, 222, 171);
    text-transform: uppercase;
}
.hud-pill strong {
    font-size: 19px;
    color: rgb(240, 248, 228);
}
.hud-top-right {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.hud-top-right-row {
    display: flex;
    gap: 8px;
}
.hud-zone {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.hud-zone .hud-pill { font-size: 15px; }
.hud-zone.is-shrinking .hud-pill {
    border-color: rgba(255, 110, 96, 0.75);
    color: rgb(255, 176, 168);
    animation: hud-zone-pulse 1s ease-in-out infinite;
}
@keyframes hud-zone-pulse {
    50% { background: rgba(96, 18, 12, 0.8); }
}
.hud-killfeed {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    max-width: min(360px, 44vw);
}
.hud-killfeed-row {
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(10, 14, 8, 0.66);
    font-size: 13px;
    color: rgb(214, 228, 194);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: hud-feed-out 6s forwards;
}
.hud-killfeed-row.is-local {
    color: rgb(200, 238, 144);
    border: 1px solid rgba(183, 239, 119, 0.45);
}
@keyframes hud-feed-out {
    0% { opacity: 0; transform: translateY(-6px); }
    6% { opacity: 1; transform: translateY(0); }
    82% { opacity: 1; }
    100% { opacity: 0; }
}
.hud-bottom-center {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: min(380px, 60vw);
}
.hud-interact {
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(183, 239, 119, 0.55);
    background: rgba(18, 26, 14, 0.85);
    font-size: 14px;
    color: rgb(220, 240, 196);
}
.hud-interact strong {
    display: inline-block;
    min-width: 18px;
    margin-right: 6px;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgb(183, 239, 119);
    color: rgb(24, 34, 12);
    text-align: center;
    font-size: 13px;
}
.hud-interact[hidden] { display: none; }
.hud-healthbar {
    width: 100%;
    height: 20px;
    border-radius: 10px;
    border: 2px solid var(--invad-panel-border);
    background: rgba(10, 14, 8, 0.72);
    overflow: hidden;
}
.hud-healthfill {
    height: 100%;
    width: 100%;
    border-radius: 7px;
    background: linear-gradient(180deg, rgb(148, 216, 96), rgb(97, 172, 52));
    transition: width 0.18s ease-out;
}
.hud-healthfill.is-warn { background: linear-gradient(180deg, rgb(230, 199, 79), rgb(196, 158, 42)); }
.hud-healthfill.is-danger { background: linear-gradient(180deg, rgb(224, 92, 78), rgb(178, 52, 40)); }
.hud-heals {
    display: flex;
    gap: 8px;
}
.hud-chip {
    padding: 3px 10px;
    border-radius: 9px;
    background: rgba(18, 26, 14, 0.78);
    border: 1px solid var(--invad-panel-border);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgb(190, 214, 162);
}
.hud-chip b { color: rgb(240, 248, 228); }
.hud-weapon {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 10px 16px;
    border-radius: 14px;
    border: 2px solid var(--invad-panel-border);
    background: var(--invad-panel);
}
.hud-weapon-name {
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(199, 222, 171);
}
.hud-weapon-ammo {
    font-size: 30px;
    font-family: Georgia, "Times New Roman", serif;
    color: rgb(240, 248, 228);
}
.hud-weapon-ammo span {
    font-size: 17px;
    color: rgb(170, 194, 143);
}
.hud-weapon-ammo.is-reloading { color: rgb(230, 199, 79); }