style.css - master - CodeByKate/lastserver-game

style.css
154 строки4 KB
CodeByKate
upload files
21 дек 2025, 21:44
21 дек 2025, 21:44136e74f
:root{
  --bg:#0b0b0f;
  --panel:#0f1720;
  --accent:#00d0ff;
  --accent2:#ff4d6d;
  --glitch:#b36cff;
  --muted:#93a1ad;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body,#game-root{height:100%}
body{
  background:linear-gradient(180deg,#05060a 0%, #0b0b0f 100%);
  color:#e6eef6;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#game-root{
  width:820px;
  position:relative;
  user-select:none;
}

/* Canvas */
#game-canvas{
  display:block;
  background:linear-gradient(#071019 0%, #000 100%);
  image-rendering: pixelated;
  width:800px;
  height:600px;
  border:3px solid #111;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7);
}

/* Compact HUD - minimal footprint at top */
#hud{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:none;
  gap:8px;
}
#hud-left, #hud-right{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:10px;
}
#level-title{
  font-size:12px;
  font-weight:700;
  color:#cfeefb;
  background:rgba(3,6,10,0.35);
  padding:6px 8px;
  border-radius:6px;
  backdrop-filter: blur(3px);
}
#player-line{font-size:12px;color:var(--muted)}
#player-line strong{color:var(--accent)}
#mini-cds{display:flex;gap:8px;align-items:center}

/* tiny stability + cds compact */
#stability-container{display:flex;flex-direction:column;gap:4px}
#stability-label{font-size:10px;color:var(--muted)}
#stability-bar{position:relative;width:140px;height:12px;background:rgba(255,255,255,0.04);border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
#stability-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#39d353,#d4ff6a);transition:width 0.2s linear}
#stability-text{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:11px;color:#061018;font-weight:800}

#ability-cds{display:flex;flex-direction:column;font-size:11px;color:var(--muted)}
#ability-cds > div{background:rgba(0,0,0,0.25);padding:4px 6px;border-radius:6px}

/* small top-right buttons */
#top-buttons{pointer-events:auto;display:flex;gap:6px;align-items:center}
button.small{
  background:linear-gradient(180deg,#111418,#0b0f12);
  color:#dfeffb;border:1px solid rgba(255,255,255,0.04);
  padding:6px 8px;border-radius:6px;font-size:12px;cursor:pointer;opacity:0.88;
}

/* Bottom-left hint */
.hint{
  position:absolute;
  left:12px;
  bottom:14px;
  font-size:12px;
  color:var(--muted);
  pointer-events:none;
  background:rgba(3,6,10,0.24);
  padding:6px 8px;border-radius:6px;
}

/* Overlay for pause / game over / win */
#overlay{
  position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
#overlay-box{
  pointer-events:auto;
  background:transparent;
  border:0;
  padding:0;
  color:#fff;
  font-size:40px;
  text-align:center;
  min-width:0;
  line-height:1.1;
  text-transform:uppercase;
  font-weight:700;
  filter:none;
}

/* small flash for damage/fall */
.flash-red{animation:flashRed 250ms ease;}
@keyframes flashRed{
  0%{box-shadow:0 0 0 rgba(0,0,0,0)}
  40%{box-shadow:0 0 40px rgba(255,40,40,0.6)}
  100%{box-shadow:0 0 0 rgba(0,0,0,0)}
}

/* Dialog */
#dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:520px;pointer-events:none}

/* Hidden */
.hidden{display:none}

/* Glitch overlay effect for canvas using pseudo-element */
#game-canvas.glitch{
  filter: contrast(1.05) saturate(1.1);
  position:relative;
}
#game-root::after{
  content:"";
  pointer-events:none;
  position:absolute;left:0;top:0;width:100%;height:100%;
  background-image:linear-gradient(transparent, rgba(255,255,255,0.02));
  mix-blend-mode:screen;
  opacity:0.5;
  border-radius:6px;
}

/* Small pixel-like font feel */
#player-indicator span{font-weight:700;color:var(--accent)}
#timer span{font-weight:700;color:var(--accent2)}
#decisions span{font-weight:700;color:var(--glitch)}