76 lines
1.4 KiB
CSS
76 lines
1.4 KiB
CSS
:root {
|
|
--bg-1: #08131d;
|
|
--bg-2: #14293a;
|
|
--panel: #102132cc;
|
|
--panel-border: #6ec5ff66;
|
|
--text: #ecf6ff;
|
|
--accent: #ffd166;
|
|
--danger: #ff6b6b;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
font-family: "Trebuchet MS", "Segoe UI", sans-serif;
|
|
color: var(--text);
|
|
background: linear-gradient(145deg, var(--bg-1), var(--bg-2));
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.page-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
radial-gradient(circle at 12% 18%, #3f95d433 0%, transparent 30%),
|
|
radial-gradient(circle at 84% 80%, #ffd1662c 0%, transparent 28%),
|
|
repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 36px,
|
|
#ffffff08 36px,
|
|
#ffffff08 37px
|
|
);
|
|
}
|
|
|
|
.layout {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.game-shell {
|
|
margin: 0;
|
|
position: relative;
|
|
background: #0f1c2a;
|
|
border: 2px solid var(--panel-border);
|
|
border-radius: 0;
|
|
box-shadow: 0 10px 24px #00000055;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
canvas {
|
|
display: block;
|
|
width: min(100vw, calc(100dvh * 15 / 13));
|
|
height: min(100dvh, calc(100vw * 13 / 15));
|
|
aspect-ratio: 15 / 13;
|
|
}
|