1 + Round
Released
Fast-paced 1v1 arena FPS inspired by Gunfight, featuring short rounds, changing weapons, randomized layouts, etc
ui/gamehud.razor.scss
GameHUD {
width: 100%;
height: 100%;
font-family: Arial;
font-weight: bold;
color: white;
pointer-events: none;
.hud-developer-preview {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
// ============================================================
// SANDBOX
// ============================================================
.sandbox-label {
position: absolute;
flex-direction: column;
padding: 10px 14px;
background-color: transparent;
}
.sandbox-label-chrome {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba( 0, 0, 0, 0.45 );
border: 1px solid rgba( 255, 255, 255, 0.10 );
pointer-events: none;
}
.sandbox-title {
font-size: 20px;
}
.sandbox-hint {
font-size: 12px;
margin-top: 0px;
opacity: 0.55;
}
// ============================================================
// COMBAT HEALTH
// ============================================================
.combat-health {
position: absolute;
top: 30px;
left: 38px;
right: 38px;
height: 58px;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.health-side {
position: relative;
width: 34%;
max-width: 440px;
flex-direction: column;
}
.health-side.opponent {
align-items: flex-end;
}
.health-heading {
width: 100%;
margin-bottom: 5px;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.health-side.opponent .health-heading {
flex-direction: row-reverse;
}
.health-label {
max-width: 270px;
font-size: 13px;
letter-spacing: 1px;
opacity: 0.78;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.health-number {
font-size: 14px;
opacity: 0.88;
}
.health-track {
position: relative;
width: 100%;
height: 15px;
overflow: hidden;
background-color: transparent;
border: 0px solid transparent;
}
.health-track-chrome {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba( 0, 0, 0, 0.58 );
border: 1px solid rgba( 255, 255, 255, 0.18 );
pointer-events: none;
}
.health-fill {
position: absolute;
top: 0;
height: 100%;
background-color: rgba( 235, 235, 235, 0.92 );
transition: width 0.10s ease-out;
}
.health-side.opponent .health-fill {
background-color: rgba( 210, 75, 70, 0.92 );
}
// ============================================================
// MATCH HUD
// ============================================================
.match-header {
position: absolute;
top: 30px;
left: 0;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.round {
position: relative;
font-size: 28px;
margin-bottom: 5px;
text-align: center;
}
.round-timer {
position: relative;
min-width: 72px;
margin-bottom: 7px;
padding: 3px 10px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.round-timer-chrome {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba( 0, 0, 0, 0.48 );
border: 1px solid rgba( 255, 255, 255, 0.12 );
pointer-events: none;
}
.timer-number {
font-size: 25px;
}
.timer-mode,
.timer-note {
font-size: 10px;
letter-spacing: 2px;
opacity: 0.72;
}
.round-timer.sudden {
.round-timer-chrome {
background-color: rgba( 120, 25, 25, 0.48 );
border-color: rgba( 255, 105, 95, 0.35 );
}
.timer-number {
font-size: 30px;
}
}
.score-label {
font-size: 11px;
letter-spacing: 4px;
opacity: 0.45;
margin-bottom: 4px;
}
.score {
position: relative;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 25px;
}
.player {
flex-direction: column;
align-items: center;
justify-content: center;
}
.score-player-label {
max-width: 190px;
font-size: 15px;
opacity: 0.72;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.score-number {
font-size: 34px;
}
.separator {
font-size: 28px;
opacity: 0.4;
}
.pot-display {
position: relative;
margin-top: 10px;
padding: 6px 14px;
flex-direction: row;
gap: 10px;
align-items: center;
background-color: transparent;
border: 0px solid transparent;
}
.pot-display-chrome {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba( 0, 0, 0, 0.45 );
border: 1px solid rgba( 255, 255, 255, 0.14 );
pointer-events: none;
}
.pot-owner {
font-size: 11px;
opacity: 0.55;
}
.pot-value {
font-size: 17px;
letter-spacing: 1px;
}
.modifier-label {
margin-top: 8px;
font-size: 13px;
letter-spacing: 3px;
opacity: 0.75;
}
.center-message {
position: absolute;
left: 0;
top: 43%;
width: 100%;
height: 100px;
justify-content: center;
align-items: center;
text-align: center;
font-size: 72px;
text-shadow: 0px 3px 10px black;
}
// ============================================================
// DECISION UI
// ============================================================
.decision-screen {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.decision-screen-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba( 5, 6, 8, 0.62 );
pointer-events: none;
}
.decision-panel {
position: relative;
width: 900px;
padding: 26px 30px;
flex-direction: column;
align-items: center;
}
.decision-panel-chrome {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba( 15, 17, 20, 0.96 );
border: 1px solid rgba( 255, 255, 255, 0.18 );
box-shadow: 0px 10px 50px rgba( 0, 0, 0, 0.55 );
pointer-events: none;
}
.decision-eyebrow {
max-width: 760px;
font-size: 12px;
letter-spacing: 4px;
opacity: 0.52;
margin-bottom: 7px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.decision-title {
font-size: 38px;
text-align: center;
}
// Legacy/simple decision text used by modifier choice and waiting states.
.decision-pot {
margin-top: 9px;
font-size: 16px;
opacity: 0.66;
}
.decision-stakes {
width: 100%;
margin-top: 15px;
flex-direction: row;
justify-content: center;
column-gap: 12px;
}
.decision-stat {
width: 245px;
min-height: 76px;
padding: 8px 18px;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba( 255, 255, 255, 0.035 );
border: 1px solid rgba( 255, 255, 255, 0.10 );
}
.decision-stat.pot {
background-color: rgba( 180, 135, 55, 0.08 );
border-color: rgba( 235, 190, 90, 0.18 );
}
.decision-stat-label {
font-size: 10px;
letter-spacing: 2px;
opacity: 0.52;
}
.decision-stat-value {
margin-top: 2px;
font-size: 30px;
line-height: 32px;
}
.decision-stat.pot .decision-stat-value {
color: rgba( 245, 210, 115, 1 );
}
.decision-stat-note {
margin-top: 1px;
font-size: 9px;
letter-spacing: 1.5px;
opacity: 0.42;
}
.decision-clock {
margin-top: 9px;
flex-direction: column;
align-items: center;
}
.decision-timer {
font-size: 23px;
line-height: 25px;
opacity: 0.82;
}
.decision-timeout-hint {
margin-top: 1px;
font-size: 9px;
letter-spacing: 1.4px;
opacity: 0.36;
}
.decision-buttons {
width: 100%;
margin-top: 18px;
flex-direction: row;
column-gap: 16px;
align-items: stretch;
}
.decision-button {
flex-grow: 1;
min-width: 0;
min-height: 142px;
padding: 18px 20px;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
border: 1px solid rgba( 255, 255, 255, 0.20 );
background-color: rgba( 255, 255, 255, 0.07 );
pointer-events: all;
cursor: pointer;
transition: background-color 0.10s ease, transform 0.10s ease;
&:hover {
background-color: rgba( 255, 255, 255, 0.17 );
}
}
.decision-button.safe {
background-color: rgba( 55, 125, 75, 0.18 );
border-color: rgba( 95, 205, 125, 0.34 );
&:hover {
background-color: rgba( 55, 145, 80, 0.31 );
border-color: rgba( 115, 235, 145, 0.55 );
}
}
.decision-button.risk {
background-color: rgba( 150, 55, 50, 0.18 );
border-color: rgba( 235, 90, 80, 0.34 );
&:hover {
background-color: rgba( 175, 65, 55, 0.31 );
border-color: rgba( 255, 110, 95, 0.55 );
}
}
.decision-button.modifier {
min-height: 110px;
justify-content: center;
background-color: rgba( 90, 105, 145, 0.16 );
&:hover {
background-color: rgba( 90, 105, 145, 0.30 );
}
}
.decision-button-title {
font-size: 25px;
text-align: center;
}
.decision-button.safe .decision-button-title {
color: rgba( 135, 235, 155, 1 );
}
.decision-button.risk .decision-button-title {
color: rgba( 245, 125, 110, 1 );
}
.decision-button-subtitle {
margin-top: 3px;
font-size: 11px;
letter-spacing: 1.5px;
text-align: center;
opacity: 0.68;
}
.decision-button-description {
margin-top: 6px;
font-size: 13px;
font-weight: normal;
opacity: 0.55;
}
.decision-button-meta {
margin-top: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
opacity: 0.42;
}
.decision-outcome {
margin-top: 13px;
min-height: 54px;
padding: 8px 12px;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba( 0, 0, 0, 0.18 );
border: 1px solid rgba( 255, 255, 255, 0.10 );
}
.safe-outcome {
border-color: rgba( 100, 220, 135, 0.17 );
}
.decision-outcome-label {
font-size: 9px;
letter-spacing: 1.5px;
opacity: 0.47;
text-align: center;
}
.decision-outcome-value {
margin-top: 2px;
font-size: 22px;
line-height: 24px;
text-align: center;
}
.decision-risk-results {
width: 100%;
margin-top: 13px;
flex-direction: row;
background-color: rgba( 0, 0, 0, 0.18 );
border: 1px solid rgba( 255, 255, 255, 0.10 );
}
.decision-risk-result {
flex-grow: 1;
min-width: 0;
min-height: 54px;
padding: 8px 10px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.decision-risk-result.win {
border-right: 1px solid rgba( 255, 255, 255, 0.08 );
}
.decision-risk-result.win .decision-outcome-value {
color: rgba( 245, 210, 115, 1 );
}
.decision-risk-result.lose .decision-outcome-value {
color: rgba( 245, 125, 110, 1 );
}
.decision-draw-note {
margin-top: 6px;
font-size: 9px;
letter-spacing: 1px;
text-align: center;
opacity: 0.38;
}
.risk-preview {
width: 100%;
margin-top: 17px;
flex-direction: column;
}
.risk-preview-title {
width: 100%;
text-align: center;
font-size: 10px;
letter-spacing: 1.8px;
opacity: 0.50;
margin-bottom: 8px;
}
.risk-preview-options {
width: 100%;
flex-direction: row;
column-gap: 12px;
}
.risk-preview-option {
flex-grow: 1;
min-width: 0;
min-height: 82px;
padding: 11px 13px;
flex-direction: column;
justify-content: center;
border: 1px solid rgba( 255, 255, 255, 0.12 );
background-color: rgba( 90, 105, 145, 0.10 );
pointer-events: none;
}
.risk-preview-name {
font-size: 15px;
}
.risk-preview-description {
margin-top: 3px;
font-size: 11px;
font-weight: normal;
opacity: 0.52;
}
.risk-preview-weapon {
margin-top: 6px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.8px;
opacity: 0.43;
}
// ============================================================
// MATCH END
// ============================================================
.match-end {
min-height: 300px;
}
.final-score {
margin-top: 18px;
margin-bottom: 30px;
font-size: 60px;
}
.return-button {
width: 360px;
flex-grow: 0;
align-items: center;
background-color: rgba( 255, 255, 255, 0.10 );
}
}
// ============================================================
// MENU NAVIGATION / SANDBOX SETUP V2
// ============================================================
GameHUD {
.menu-shell {
width: 760px;
max-height: 88%;
padding: 36px;
flex-direction: column;
align-items: center;
gap: 14px;
background-color: rgba( 14, 16, 19, 0.94 );
border: 1px solid rgba( 255, 255, 255, 0.16 );
box-shadow: 0px 18px 70px rgba( 0, 0, 0, 0.48 );
}
.menu-brand {
width: 100%;
margin-bottom: 18px;
flex-direction: column;
align-items: center;
}
.page-heading {
width: 100%;
margin-top: 4px;
font-size: 31px;
letter-spacing: 3px;
text-align: center;
}
.page-copy {
width: 100%;
margin-bottom: 14px;
font-size: 14px;
font-weight: normal;
text-align: center;
opacity: 0.52;
}
.menu-back,
.menu-primary {
min-width: 160px;
min-height: 48px;
padding: 13px 20px;
align-items: center;
justify-content: center;
border: 1px solid rgba( 255, 255, 255, 0.18 );
background-color: rgba( 255, 255, 255, 0.06 );
cursor: pointer;
pointer-events: all;
font-size: 14px;
letter-spacing: 2px;
&:hover {
background-color: rgba( 255, 255, 255, 0.14 );
}
}
.menu-primary {
min-width: 260px;
background-color: rgba( 75, 130, 95, 0.22 );
&:hover {
background-color: rgba( 75, 130, 95, 0.36 );
}
}
.setup-grid {
width: 100%;
flex-direction: row;
gap: 16px;
align-items: stretch;
}
.setup-section {
flex-grow: 1;
padding: 18px;
flex-direction: column;
gap: 12px;
background-color: rgba( 255, 255, 255, 0.035 );
border: 1px solid rgba( 255, 255, 255, 0.10 );
}
.setup-section-title {
margin-bottom: 4px;
font-size: 12px;
letter-spacing: 3px;
opacity: 0.55;
}
.setup-row {
width: 100%;
flex-direction: column;
gap: 6px;
}
.setup-label {
font-size: 11px;
letter-spacing: 2px;
opacity: 0.58;
}
.setup-selector {
width: 100%;
height: 45px;
flex-direction: row;
align-items: stretch;
border: 1px solid rgba( 255, 255, 255, 0.13 );
background-color: rgba( 0, 0, 0, 0.24 );
}
.selector-arrow {
width: 44px;
align-items: center;
justify-content: center;
font-size: 23px;
cursor: pointer;
pointer-events: all;
background-color: rgba( 255, 255, 255, 0.04 );
&:hover {
background-color: rgba( 255, 255, 255, 0.14 );
}
}
.selector-value {
flex-grow: 1;
padding: 0 8px;
align-items: center;
justify-content: center;
text-align: center;
font-size: 13px;
}
.setup-actions {
width: 100%;
margin-top: 10px;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.sandbox-status {
margin-top: 0px;
font-size: 10px;
letter-spacing: 1px;
opacity: 0.52;
}
.sandbox-health {
top: 28px;
}
}
// ============================================================
// ONLINE 1V1 FLOW V1
// ============================================================
GameHUD {
.online-flow {
width: 100%;
flex-direction: column;
align-items: center;
gap: 16px;
}
.matchmaking-button {
background-color: rgba( 70, 105, 155, 0.18 );
&:hover {
background-color: rgba( 70, 105, 155, 0.34 );
}
}
.online-status-label {
margin-top: 8px;
font-size: 16px;
letter-spacing: 4px;
opacity: 0.72;
text-align: center;
}
.online-status-label.found {
opacity: 1;
font-size: 20px;
}
.online-status-label.error {
color: rgb( 235, 115, 105 );
opacity: 1;
}
.online-spinner {
height: 42px;
align-items: center;
justify-content: center;
font-size: 32px;
letter-spacing: 10px;
opacity: 0.55;
}
.player-card-row {
width: 100%;
margin: 8px 0 10px 0;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 18px;
}
.player-card {
width: 270px;
min-height: 125px;
padding: 18px;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba( 255, 255, 255, 0.045 );
border: 1px solid rgba( 255, 255, 255, 0.12 );
}
.player-card.ready {
background-color: rgba( 75, 130, 95, 0.10 );
border-color: rgba( 125, 205, 145, 0.24 );
}
.player-card.searching {
opacity: 0.55;
}
.opponent-card {
background-color: rgba( 140, 75, 75, 0.10 );
border-color: rgba( 220, 130, 120, 0.22 );
}
.player-card-label {
font-size: 10px;
letter-spacing: 3px;
opacity: 0.45;
}
.player-card-name {
max-width: 230px;
margin-top: 8px;
font-size: 22px;
text-align: center;
overflow: hidden;
}
.player-card-state {
margin-top: 9px;
font-size: 10px;
letter-spacing: 3px;
opacity: 0.50;
}
.versus {
width: 48px;
justify-content: center;
align-items: center;
font-size: 20px;
opacity: 0.35;
}
.match-starting {
min-width: 280px;
padding: 10px 18px;
justify-content: center;
align-items: center;
background-color: rgba( 0, 0, 0, 0.28 );
border: 1px solid rgba( 255, 255, 255, 0.12 );
font-size: 15px;
letter-spacing: 3px;
}
.error-copy {
color: rgb( 235, 165, 155 );
opacity: 0.82;
}
.warmup-label .sandbox-label-chrome {
background-color: rgba( 45, 65, 105, 0.48 );
}
.ammo-hud {
position: absolute;
min-width: 155px;
padding: 12px 15px;
flex-direction: column;
align-items: flex-end;
}
.ammo-hud-chrome {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba( 10, 12, 14, 0.52 );
border: 1px solid rgba( 255, 255, 255, 0.10 );
pointer-events: none;
}
.ammo-weapon {
max-width: 190px;
margin-bottom: 0px;
font-size: 10px;
letter-spacing: 2px;
opacity: 0.48;
text-align: right;
}
.ammo-state {
margin-bottom: 0px;
font-size: 9px;
letter-spacing: 2px;
opacity: 0.58;
}
.ammo-count {
flex-direction: row;
align-items: baseline;
gap: 5px;
}
.ammo-current {
font-size: 31px;
font-weight: bold;
}
.ammo-divider {
font-size: 17px;
opacity: 0.28;
}
.ammo-capacity {
font-size: 16px;
opacity: 0.58;
}
}
// ============================================================
// DEVELOPER HUD PREVIEW NAVIGATION
// ============================================================
GameHUD {
.hud-preview-toolbar {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX( -50% );
z-index: 10000;
padding: 8px 10px;
flex-direction: column;
align-items: center;
gap: 6px;
background-color: rgba( 5, 6, 8, 0.88 );
border: 1px solid rgba( 255, 255, 255, 0.18 );
pointer-events: all;
}
.hud-preview-toolbar-title {
font-size: 10px;
letter-spacing: 3px;
opacity: 0.55;
}
.hud-preview-toolbar-buttons {
flex-direction: row;
gap: 5px;
}
.hud-preview-state {
padding: 6px 9px;
font-size: 10px;
letter-spacing: 1px;
background-color: rgba( 255, 255, 255, 0.06 );
border: 1px solid rgba( 255, 255, 255, 0.10 );
cursor: pointer;
pointer-events: all;
&:hover {
background-color: rgba( 255, 255, 255, 0.14 );
}
&.active {
background-color: rgba( 255, 255, 255, 0.22 );
border-color: rgba( 255, 255, 255, 0.34 );
}
}
}
// ============================================================
// COMBAT FEEDBACK
// ============================================================
GameHUD {
.combat-damage-feedback {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 900;
overflow: hidden;
}
.combat-damage-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background-color: currentColor;
mask-mode: alpha;
mask-image: radial-gradient( rgba(255,255,255,0), rgba(255,255,255,1) );
transition: opacity 0.025s linear;
}
.combat-damage-arc-wrapper {
position: absolute;
left: 50%;
top: 50%;
pointer-events: none;
transform-origin: 50% 50%;
transition: transform 0.02s linear;
}
.combat-damage-arc-offset {
position: absolute;
inset: 0;
pointer-events: none;
transform-origin: 50% 50%;
}
.combat-damage-arc {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
image-rendering: bilinear;
transition: opacity 0.025s linear;
}
.combat-damage-arc-glow {
z-index: 0;
}
.combat-damage-arc-core {
z-index: 1;
}
.combat-hitmarker {
position: absolute;
left: 50%;
top: 50%;
pointer-events: none;
z-index: 910;
transition: opacity 0.025s linear, transform 0.025s linear;
}
.combat-hitmarker-line {
position: absolute;
background-color: currentColor;
border-radius: 999px;
}
}
// ============================================================
// BOT 0.5 SANDBOX DEBUG
// ============================================================
.bot-debug-panel {
position: absolute;
right: 38px;
bottom: 38px;
min-width: 340px;
padding: 10px 12px;
flex-direction: column;
gap: 3px;
background-color: rgba( 8, 10, 14, 0.78 );
border-left: 2px solid rgba( 255, 205, 85, 0.72 );
border-top: 1px solid rgba( 255, 255, 255, 0.08 );
border-right: 1px solid rgba( 255, 255, 255, 0.05 );
border-bottom: 1px solid rgba( 255, 255, 255, 0.05 );
}
.bot-debug-title {
font-size: 11px;
letter-spacing: 2px;
color: rgba( 255, 218, 125, 0.95 );
}
.bot-debug-line {
font-size: 10px;
letter-spacing: 1px;
opacity: 0.62;
}