Janik Dietz
25fc6fb345
- Add new fullscreen game mode playable in a dedicated browser tab - Extract shared game logic into `engine.js` to be used by both popup and fullscreen modes - Implement self-protection to prevent closing the game tab or popup tab - Update documentation and bump version to 1.1.0
61 lines
1.2 KiB
CSS
61 lines
1.2 KiB
CSS
/* ============================================================
|
|
TAB SHOOTER — Vollbild-Modus (game.html)
|
|
Baut auf popup.css auf und überschreibt nur, was nötig ist.
|
|
============================================================ */
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body.fullscreen {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
#app.fullscreen-app {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Spiel-Screen zentriert das Canvas im Vollbild */
|
|
#game-screen {
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#game-canvas {
|
|
width: min(900px, 96vw);
|
|
height: min(680px, 88vh);
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, 0.05),
|
|
0 0 60px rgba(0, 240, 255, 0.15);
|
|
cursor: crosshair;
|
|
}
|
|
|
|
/* HUD im Vollbild: schwebt oben über dem Canvas, zentriert */
|
|
#game-screen #hud {
|
|
top: max(12px, 6vh);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: min(900px, 96vw);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* Start-Screen im Vollbild etwas luftiger */
|
|
#start-screen .scope-select {
|
|
max-width: 520px;
|
|
}
|
|
|
|
#start-screen .primary-btn {
|
|
padding: 16px 64px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Gtooltip-hinweis im Vollbild-Menü: das ist dieser Tab */
|
|
#start-screen .subtitle strong {
|
|
color: #00ff88;
|
|
}
|