/* sbx10's page (from sbx3's) in the holo look of the game's UI kit (Plugins/GameUI HoloTokens: the same colours as the in-game UI).
 * The engine's page structure and script are kept (ids #mainarea, #compilingmessage, #loadTasks, #canvas, #buttonarea, #logwindow, #errorDialog);
 * the look is this file. System fonts only, no external resources. */

:root {
	--holo-core: #49D8FF;
	--holo-core-bright: #A6F0FF;
	--holo-core-deep: #1B5F7A;
	--holo-gold: #F2DCA0;
	--holo-indigo: #121A3E;
	--holo-indigo-deep: #070B1E;
	--holo-ink: #03040C;
	--holo-alert: #FF9A4D;
	--holo-danger: #FF5A5A;
	--holo-text: #E8F7FF;
	--holo-text-dim: #93B4C8;
	--holo-hairline: 1px;
	--holo-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body, .container {
	height: 100%;
	margin: 0;
	font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background: var(--holo-indigo-deep) radial-gradient(ellipse at 50% 38%, var(--holo-indigo) 0%, var(--holo-indigo-deep) 62%);
	color: var(--holo-text);
	overflow: hidden;
}

/* the field behind everything: faint scanlines and a slow sweep (CSS only) */
.holo-field {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(0deg, rgba(73, 216, 255, 0.035) 0px, rgba(73, 216, 255, 0.035) 1px, transparent 1px, transparent 3px),
		linear-gradient(180deg, transparent 0%, rgba(73, 216, 255, 0.06) 50%, transparent 100%);
	background-size: 100% 3px, 100% 240px;
	z-index: 0;
}

/* the sweep runs only while the page loads (the running game covers the field: no repaint cost in play) */
body:has(#compilingmessage) .holo-field {
	animation: holo-sweep 7s linear infinite;
}

@keyframes holo-sweep {
	0% { background-position: 0 0, 0 -240px; }
	100% { background-position: 0 0, 0 100vh; }
}

.h4, h4 {
	margin-top: 1pt;
	margin-bottom: 1pt;
	font-size: 10pt;
}

.container {
	display: table;
	vertical-align: middle;
	border: 0px;
	border-spacing: 0px;
}

/* the loading tasks' spinner: a thin turning ring instead of the icon font */
.glyphicon-spin {
	animation: holo-spin 1400ms infinite linear;
}

.glyphicon-refresh:before, .glyphicon-ok:before {
	content: "";
}

.glyphicon-refresh {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: var(--holo-hairline) solid var(--holo-core);
	border-top-color: transparent;
	border-radius: 50%;
	vertical-align: -1px;
	margin-right: 8px;
}

@keyframes holo-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}

@-webkit-keyframes holo-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}

.wrapper {
	position: relative;
	margin: 0 auto 0 auto;
	text-align: center;
	min-width: 320px;
	width: 100%;
	height: 180px; /* initial height, will be dynamically adjusted at runtime */
	max-width: 100%;
	display: block;
	align-items: center;
	text-align: center;
	justify-content: center;
	z-index: 1;
}

.alert {
	white-space: nowrap;
}

/* the loading plate: translucent indigo, a hairline edge, corner brackets, tracked caps */
#compilingmessage.alert, #compilingmessage {
	background: rgba(7, 11, 30, 0.82) !important;
	border: var(--holo-hairline) solid rgba(73, 216, 255, 0.35) !important;
	border-radius: 0 !important;
	color: var(--holo-text) !important;
	padding: 18px 26px !important;
	min-width: 280px;
	box-shadow: 0 0 24px rgba(73, 216, 255, 0.12), inset 0 0 18px rgba(73, 216, 255, 0.05);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: left;
	animation: holo-reveal 420ms var(--holo-ease) both;
}

#compilingmessage:before, #compilingmessage:after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border: 1px solid var(--holo-core-bright);
}

#compilingmessage:before {
	left: -1px;
	top: -1px;
	border-right: 0;
	border-bottom: 0;
}

#compilingmessage:after {
	right: -1px;
	bottom: -1px;
	border-left: 0;
	border-top: 0;
}

#loadTasks div {
	line-height: 22px;
	color: var(--holo-text-dim);
}

#loadTasks div:last-child {
	color: var(--holo-text);
}

@keyframes holo-reveal {
	0% { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
	100% { opacity: 1; transform: translate(-50%, -50%); }
}

.emscripten {
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
	display: -webkit-box;
	display: -moz-box;
	display: box;

	-webkit-box-align: center;
	-moz-box-align: center;
	box-align: center;

	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;

	outline: none;
}

#canvas:not([fullscreen]) {
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.texthalf {
	height: 37%;
	border: 0px;
	padding: 0px;
	overflow-y: scroll;
	font-size: 2em;
}

/* the toolbar: quiet hairline buttons in tracked caps, a glow on hover and focus */
/* the toolbar floats at the top right, quiet until hovered: the canvas fills the whole window under it */
.buttonarea {
	position: fixed;
	top: 6px;
	right: 6px;
	border: 0;
	padding: 0;
	margin: 0;
	z-index: 2;
	opacity: 0.35;
	transition: opacity 180ms var(--holo-ease);
}

.buttonarea:hover, .buttonarea:focus-within {
	opacity: 1;
}

#mainarea, #canvas {
	background: var(--holo-indigo-deep);
}

#buttonarea .btn-primary, .btn-primary {
	padding: 4px 14px;
	text-align: center;
	min-width: 120px;
	max-height: 28px;
	margin: 8px 6px 8px 6px;
	background: rgba(7, 11, 30, 0.6) !important;
	border: var(--holo-hairline) solid rgba(73, 216, 255, 0.4) !important;
	border-radius: 0 !important;
	color: var(--holo-text-dim) !important;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: color 150ms var(--holo-ease), border-color 150ms var(--holo-ease), box-shadow 150ms var(--holo-ease);
	outline: none !important;
}

#buttonarea .btn-primary:hover, #buttonarea .btn-primary:focus, .btn-primary:hover, .btn-primary:focus {
	color: var(--holo-text) !important;
	border-color: var(--holo-core) !important;
	box-shadow: 0 0 12px rgba(73, 216, 255, 0.35);
}

#buttonarea .btn-primary:active, .btn-primary:active {
	color: var(--holo-core-bright) !important;
	box-shadow: 0 0 6px rgba(73, 216, 255, 0.5);
}

.btn-primary .glyphicon {
	color: var(--holo-core);
}

.progress { background: rgba(73, 216, 255, 0.12); border: 0; border-radius: 0; height: 2px; }
.progress-bar-custom { background: var(--holo-core); box-shadow: 0 0 8px var(--holo-core); }

.centered-axis-xy {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

/* errors and warnings: the same plate, the warm alert */
#errorDialog, .alert-danger {
	background: rgba(30, 7, 9, 0.88) !important;
	border: var(--holo-hairline) solid rgba(255, 90, 90, 0.6) !important;
	border-radius: 0 !important;
	color: #FFE3E0 !important;
	padding: 16px 22px !important;
	white-space: normal;
	max-width: 80vw;
	text-align: left;
	box-shadow: 0 0 24px rgba(255, 90, 90, 0.18);
	z-index: 10;
}

#warningDialog, .alert-warning:not(#compilingmessage) {
	background: rgba(30, 18, 7, 0.88) !important;
	border: var(--holo-hairline) solid rgba(255, 154, 77, 0.55) !important;
	border-radius: 0 !important;
	color: var(--holo-gold) !important;
}

/* the about box (when the build shows one) */
.modal-content {
	background: rgba(7, 11, 30, 0.94);
	border: var(--holo-hairline) solid rgba(73, 216, 255, 0.35);
	border-radius: 0;
	color: var(--holo-text);
}

#logwindow {
	background: rgba(3, 4, 12, 0.9);
	color: var(--holo-text-dim);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* these styles convert the "blue buttons" into transparent buttons which are more subtle and less distracting */
/*TRANSPARENT_TOOLBAR_UNCOMMENT
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background-color: transparent !important;
	border-color: transparent !important;
	outline: none;
}
TRANSPARENT_TOOLBAR_UNCOMMENT*/

/** these styles hide the text on each button, leaving just the icon */
/*ICONS_ONLY_TOOLBAR_UNCOMMENT
.btn-primary .buttontext {
	display: none;
}
.btn-primary {
	min-width: 30px;
	margin-left: 30px;
	margin-right: 30px;
}
ICONS_ONLY_TOOLBAR_UNCOMMENT*/

/* sbx10 (2026-10-27, owner: "the page should be just the fullscreen game and the loading screen in the game's style"): the toolbar keeps only the
   fullscreen button; pause / resume / about / clear-storage stay in the DOM for the engine's script but are never shown */
#buttonarea .btn-primary:not(#fullscreen_request) { display: none !important; }
#logwindow { display: none !important; }

/* ---- sbx10: the game's own loading look (Sbx9Hud PaintLoadingLook: a near-black field, gold hairlines, the SURVIVALBOX wordmark, a gold bar),
   overriding the indigo kit above. Gold (0.70 0.47 0.16) = #B37829, bright gold (1.0 0.74 0.33) = #FFBD54, text (0.95 0.91 0.82) = #F2E8D1. */
:root {
	--sbx-gold: #B37829;
	--sbx-gold-bright: #FFBD54;
	--sbx-text: #F2E8D1;
	--sbx-field: #06070C;
	--sbx-field-2: #0E1120;
}
html { background: var(--sbx-field) !important; }
body { background: var(--sbx-field) radial-gradient(ellipse at 50% 42%, var(--sbx-field-2) 0%, var(--sbx-field) 64%) fixed !important; color: var(--sbx-text) !important; }
.container, #mainarea, #canvas { background: transparent !important; color: var(--sbx-text) !important; }
.holo-field { display: none !important; }
#compilingmessage.alert, #compilingmessage {
	position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important;
	width: min(520px, 86vw); padding: 44px 36px 30px 36px !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	text-align: center !important; color: var(--sbx-text) !important;
	font-family: "Cinzel", "Trajan Pro", "Palatino Linotype", Palatino, Georgia, serif !important;
}
#compilingmessage:before, #compilingmessage:after { display: none !important; }
#loadTasks:before {
	content: "LOADING";
	display: block; font-size: 11px; letter-spacing: 0.32em; color: var(--sbx-gold); opacity: 0.9; margin-bottom: 6px;
}
#loadTasks { position: relative; }
#loadTasks:after {
	content: "SURVIVALBOX";
	display: block; order: -1;
	font-size: 42px; font-weight: 700; letter-spacing: 0.08em; color: var(--sbx-text);
	text-shadow: 0 0 18px rgba(255, 189, 84, 0.18);
	margin: 0 0 14px 0; padding-bottom: 14px;
	background: linear-gradient(90deg, transparent 0%, var(--sbx-gold) 30%, var(--sbx-gold-bright) 50%, var(--sbx-gold) 70%, transparent 100%) no-repeat 50% 100% / 100% 2px;
}
#loadTasks { display: flex; flex-direction: column; }
#loadTasks div {
	font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 13px; font-style: italic; letter-spacing: 0.02em; color: rgba(242, 232, 209, 0.55) !important; text-transform: none !important;
}
#loadTasks div:last-child { color: var(--sbx-text) !important; }
#loadTasks div:before { display: none !important; }
#loadTasks div.spinner:before, .spinner:before { border-color: var(--sbx-gold) transparent transparent transparent !important; }
#errorDialog, .alert-danger { background: rgba(6, 7, 12, 0.92) !important; border: 1px solid var(--sbx-gold) !important; color: var(--sbx-text) !important; }
#buttonarea .btn-primary { border-color: rgba(179, 120, 41, 0.6) !important; color: var(--sbx-text) !important; background: rgba(6, 7, 12, 0.7) !important; }

/* the fullscreen button must never sit over the HUD (it overlapped the journal panel at the top right): invisible until the pointer is near it */
.buttonarea { opacity: 0 !important; }
.buttonarea:hover, .buttonarea:focus-within { opacity: 1 !important; }