154 lines
3.3 KiB
CSS
154 lines
3.3 KiB
CSS
/* =====================================================================
|
||
* style.css — retro arayüz (RAYCASTER-3D)
|
||
* ===================================================================== */
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--bg: #0b0c10;
|
||
--panel: #11141b;
|
||
--line: #2a303c;
|
||
--accent: #e7ff3c; /* retro sarı-yeşil */
|
||
--cyan: #2fd4ff;
|
||
}
|
||
|
||
html, body {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
background:
|
||
radial-gradient(ellipse at 50% 0%, #151927 0%, var(--bg) 70%);
|
||
color: #cfd6e4;
|
||
font-family: 'Courier New', Courier, monospace;
|
||
display: flex;
|
||
flex-direction: column;
|
||
user-select: none;
|
||
}
|
||
|
||
/* ---------- Üst bar ---------- */
|
||
.topbar {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 18px;
|
||
padding: 12px 18px;
|
||
border-bottom: 1px solid var(--line);
|
||
background: linear-gradient(180deg, #151a24, #10131a);
|
||
flex-wrap: wrap;
|
||
}
|
||
.topbar .logo {
|
||
font-weight: 700;
|
||
font-size: 17px;
|
||
letter-spacing: 2px;
|
||
color: var(--accent);
|
||
text-shadow: 0 0 8px rgba(231,255,60,.35);
|
||
}
|
||
.topbar .logo .dim { color: #7f8aa0; font-weight: 400; }
|
||
.topbar .tag, .topbar .hint {
|
||
font-size: 11px;
|
||
color: #6f7a90;
|
||
}
|
||
.topbar .hint { margin-left: auto; color: #9aa6bc; }
|
||
|
||
/* ---------- Sahne ------------- */
|
||
.stage { flex: 1; display: flex; flex-direction: column; padding: 14px 18px; }
|
||
|
||
.viewport {
|
||
position: relative;
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.viewport canvas#game {
|
||
border: 3px solid #262c38;
|
||
box-shadow: 0 0 0 1px #0c0f14, 0 12px 40px rgba(0,0,0,.7);
|
||
background: #000;
|
||
image-rendering: pixelated;
|
||
image-rendering: crisp-edges;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* ---------- Çapraz nişangâh (retro hedef) ---------- */
|
||
.crosshair {
|
||
position: absolute;
|
||
left: 50%; top: 50%;
|
||
width: 0; height: 0;
|
||
pointer-events: none;
|
||
z-index: 5;
|
||
}
|
||
.crosshair .y {
|
||
position: absolute;
|
||
width: 22px; height: 2px;
|
||
margin: -1px -11px;
|
||
background: rgba(255,255,255,.9);
|
||
box-shadow: 0 0 3px #000;
|
||
}
|
||
.crosshair .x {
|
||
position: absolute;
|
||
width: 2px; height: 22px;
|
||
margin: -11px -1px;
|
||
background: rgba(255,255,255,.9);
|
||
box-shadow: 0 0 3px #000;
|
||
}
|
||
|
||
/* ---------- Minimap / radar ---------- */
|
||
.minimap-wrap {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 10px;
|
||
padding: 4px;
|
||
background: rgba(8,11,16,.88);
|
||
border: 1px solid #39424f;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,.6);
|
||
z-index: 6;
|
||
}
|
||
.minimap-wrap canvas {
|
||
display: block;
|
||
image-rendering: pixelated;
|
||
image-rendering: crisp-edges;
|
||
}
|
||
.mm-label {
|
||
position: absolute;
|
||
bottom: 6px;
|
||
right: 8px;
|
||
font-size: 9px;
|
||
letter-spacing: 2px;
|
||
color: #ffe14d;
|
||
text-shadow: 0 0 4px #000;
|
||
}
|
||
|
||
/* ---------- HUD barı ---------- */
|
||
.hudbar {
|
||
display: flex;
|
||
align-items: stretch;
|
||
gap: 0;
|
||
border-top: 2px solid #2a303c;
|
||
background: linear-gradient(180deg, #171b25, #0d0f15);
|
||
padding: 10px 14px 12px;
|
||
}
|
||
.hud-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 84px;
|
||
border-right: 1px solid #262c38;
|
||
padding: 0 16px 0 4px;
|
||
}
|
||
.hud-block label {
|
||
font-size: 9px;
|
||
letter-spacing: 2px;
|
||
color: #6f7a90;
|
||
}
|
||
.hud-block strong {
|
||
font-size: 20px;
|
||
letter-spacing: 1px;
|
||
color: var(--accent);
|
||
text-shadow: 0 0 6px rgba(231,255,60,.28);
|
||
}
|
||
.hud-fill { flex: 1; }
|
||
.hud-copy {
|
||
align-self: flex-end;
|
||
font-size: 10px;
|
||
color: #49536a;
|
||
letter-spacing: 1px;
|
||
}
|